/* ============================================================
   KM Optics Customer Portal — frontend styles
   v0.5 — Phase 1: Design tokens + layout shell + primitives

   Note: This file replaces the v0.4 portal.css. Class names are
   kmo-prefixed and CSS variables are --kmo- prefixed.
   Navy + Comfortable is the locked baseline; no palette/density
   toggles exposed on the frontend.
   ============================================================ */

/* ===== Design tokens ===== */
:root {
    /* Surface */
    --kmo-bg: #FAFBFC;
    --kmo-surface: #FFFFFF;
    --kmo-surface-2: #F4F6F8;

    /* Borders */
    --kmo-border: #E5E8EC;
    --kmo-border-strong: #D4D9DF;

    /* Text */
    --kmo-text: #1A2330;
    --kmo-text-muted: #6B7480;
    --kmo-text-faint: #9099A3;

    /* Brand */
    --kmo-primary: #1C3D5A;
    --kmo-primary-hover: #15314A;
    --kmo-primary-soft: #EAF0F5;
    --kmo-accent: #1C3D5A; /* legacy alias — was orange; now navy */

    /* Status */
    --kmo-success: #2E7D4F;
    --kmo-success-soft: #E8F3EC;
    --kmo-warning: #B4751A;
    --kmo-warning-soft: #FDF2DD;
    --kmo-error: #B13838;
    --kmo-error-soft: #FBE9E9;
    --kmo-info-soft: #EAF2FA;

    /* Shape */
    --kmo-radius: 4px;
    --kmo-radius-lg: 6px;

    /* Elevation */
    --kmo-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --kmo-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --kmo-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.08);

    /* Density (Comfortable baseline) */
    --kmo-row-h: 40px;
    --kmo-cell-y: 10px;
    --kmo-cell-x: 12px;
    --kmo-gap: 16px;
    --kmo-gap-lg: 24px;
    --kmo-section-y: 32px;

    /* Layout */
    --kmo-sidebar-w: 240px;
    --kmo-sidebar-w-collapsed: 64px;
    --kmo-topbar-h: 56px;

    /* Type */
    --kmo-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --kmo-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Skalering på store skærme — sættes af @media-trinnene nederst i filen.
     * Alle mål her er px, så uden dette trin bliver portalen en lille ø midt
     * på en 4K-skærm ved 100 % zoom. Viewport-enheder følger IKKE zoom
     * (målt i Chrome: 100vh under zoom 1.3 renderes som 1,3 × skærmhøjden),
     * derfor divideres hver vh/vw-brug med --kmo-zoom. */
    --kmo-zoom: 1;
    --kmo-page-max: 1280px;
}

/* ===== Base / reset ===== */
/* Why: :where() har specificity 0, så vi undgår at .kmo-portal *
 * vinder over senere klasse-baserede border-box-overrides. */
:where(.kmo-portal, .kmo-portal *) { box-sizing: border-box; }

.kmo-portal {
    font-family: var(--kmo-font-ui);
    font-size: 14px;
    line-height: 1.5;
    color: var(--kmo-text);
    background: var(--kmo-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.kmo-portal h1,
.kmo-portal h2,
.kmo-portal h3,
.kmo-portal h4 {
    color: var(--kmo-text);
    margin: 0;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.kmo-portal h1 { font-size: 24px; letter-spacing: -0.01em; }
.kmo-portal h2 { font-size: 18px; }
.kmo-portal h3 { font-size: 15px; }
.kmo-portal p  { margin: 0; }
.kmo-portal a  { color: var(--kmo-primary); text-decoration: none; }
.kmo-portal a:hover { text-decoration: underline; }


/* ===== Layout shell ===== */
.kmo-shell {
    display: grid;
    grid-template-columns: var(--kmo-sidebar-w) 1fr;
    min-height: calc(100vh / var(--kmo-zoom));
}
.kmo-shell.is-collapsed { grid-template-columns: var(--kmo-sidebar-w-collapsed) 1fr; }

/* Indholdskolonnen maa kunne blive SMALLERE end sit indhold.
   Et grid-item har `min-width: auto`, hvilket betyder «aldrig mindre end
   min-content». Indeholder siden noget der er bredere end skaermen — hyldens
   karrusel, en bred tabel, en lang kodelinje — vokser <main> derfor ud over
   kolonnen, og HELE siden faar vandret scroll. Maalt 2026-09-18 paa 390 px:
   dokumentets scrollWidth var 1280 mod en viewport paa 390, altsaa 890 px
   overloeb paa vareside, kurv OG checkout. Fjernedes hylden fra DOM'en, faldt
   det til 390 — men fejlen er ikke hyldens: den ligger her, og enhver bred
   komponent ville udloese den.
   Sporets eget `min-width: 0` hjaelper ikke; begraensningen skal staa paa det
   led der ER grid-item. */
.kmo-shell > main { min-width: 0; }

/* When the WP theme already wraps content in a container, use this
   modifier to opt out of the grid (e.g. legacy pages or popups). */
.kmo-shell--bare { display: block; }


/* ===== Sidebar ===== */
.kmo-sidebar {
    background: var(--kmo-surface);
    border-right: 1px solid var(--kmo-border);
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: calc(100vh / var(--kmo-zoom));
    overflow: hidden;
}
.kmo-sidebar__brand {
    height: var(--kmo-topbar-h);
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-bottom: 1px solid var(--kmo-border);
}
/* Logoet er link til Oversigt. Skal se ud som et logo, ikke som et link —
   affordancen er hover/fokus, ikke understregning. min-width:0 så flex-kæden
   (brand → link → img) stadig kan krympe i collapsed-tilstand. */
.kmo-sidebar__brand-link {
    display: flex;
    align-items: center;
    min-width: 0;
    text-decoration: none;
    color: inherit;
    border-radius: var(--kmo-radius);
    transition: opacity .12s;
}
.kmo-sidebar__brand-link:hover { opacity: 0.75; text-decoration: none; }
.kmo-sidebar__brand-link:focus-visible {
    outline: 2px solid var(--kmo-primary);
    outline-offset: 3px;
}
.kmo-sidebar__logo {
    height: 28px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
    display: block;
}
.is-collapsed .kmo-sidebar__logo { height: 24px; max-width: 32px; }

.kmo-sidebar__nav { flex: 1; padding: 8px; overflow-y: auto; }
.kmo-sidebar__group-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--kmo-text-faint);
    padding: 14px 12px 6px;
    font-weight: 600;
}
.is-collapsed .kmo-sidebar__group-label { display: none; }

.kmo-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--kmo-radius);
    color: var(--kmo-text-muted);
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 500;
    border: 1px solid transparent;
    background: transparent;
    width: 100%;
    text-align: left;
    font-family: inherit;
    text-decoration: none;
}
.kmo-nav-item:hover { background: var(--kmo-surface-2); color: var(--kmo-text); text-decoration: none; }
.kmo-nav-item.is-active { background: var(--kmo-primary-soft); color: var(--kmo-primary); }
.kmo-nav-item__icon {
    width: 18px; height: 18px;
    flex-shrink: 0;
    display: grid; place-items: center;
    color: currentColor;
}
.kmo-nav-item__badge {
    margin-left: auto;
    background: var(--kmo-primary);
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 6px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
}
.is-collapsed .kmo-nav-item { justify-content: center; padding: 8px; }
.is-collapsed .kmo-nav-item__label,
.is-collapsed .kmo-nav-item__badge { display: none; }

.kmo-sidebar__footer {
    border-top: 1px solid var(--kmo-border);
    padding: 12px;
}
.kmo-clinic-card {
    background: var(--kmo-surface-2);
    border-radius: var(--kmo-radius);
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    color: inherit;
}
.kmo-clinic-card:hover { background: #ECEFF2; }
.kmo-clinic-card__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--kmo-text-faint); font-weight: 600; }
.kmo-clinic-card__name { font-size: 13px; font-weight: 600; color: var(--kmo-text); }
/* Kunden over afdelingen — kun rendret naar brugeren har flere kunder. */
.kmo-clinic-card__customer {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--kmo-text);
    line-height: 1.3;
}
.kmo-clinic-card__customer + .kmo-clinic-card__name { font-weight: 500; color: var(--kmo-text-muted); }
.kmo-clinic-card__meta { font-size: 11.5px; color: var(--kmo-text-muted); }
.is-collapsed .kmo-clinic-card { display: none; }


/* ===== Topbar ===== */
.kmo-topbar {
    height: var(--kmo-topbar-h);
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 24px;
    background: var(--kmo-surface);
    border-bottom: 1px solid var(--kmo-border);
    position: sticky;
    top: 0;
    z-index: 10;
}
.kmo-topbar__crumbs {
    font-size: 13px;
    color: var(--kmo-text-muted);
    display: flex; align-items: center; gap: 6px;
}
.kmo-topbar__crumbs strong { color: var(--kmo-text); font-weight: 600; }
.kmo-topbar__crumbs .sep { color: var(--kmo-text-faint); }

/* Kunde-identifier i topbar — diskret men tydelig blok til højre for
 * crumbs. Adskilt visuelt med en venstre-kant så det ikke ser ud som om
 * det er en del af crumb-stien. Skjules på små skærme hvor pladsen er
 * begrænset. */
.kmo-topbar__customer {
    /* Absolut-centreret i topbar uafhængigt af crumbs/button-bredder. .kmo-topbar
     * har allerede position: sticky som etablerer positioning-context. Margin/
     * border-left fra tidligere version droppet — den var meningsløs når
     * elementet ikke længere sidder lige efter crumbs i normal flow. */
    position: absolute; left: 50%; transform: translateX(-50%);
    display: inline-flex; align-items: baseline; gap: 6px;
    font-size: 13px; color: var(--kmo-text);
    pointer-events: none;
}
.kmo-topbar__customer-lbl {
    color: var(--kmo-text-muted);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
}
.kmo-topbar__customer strong { font-weight: 600; }
@media (max-width: 720px) {
    .kmo-topbar__customer { display: none; }
}

.kmo-topbar__spacer { flex: 1; }

.kmo-topbar__search { width: 280px; position: relative; }
.kmo-topbar__search input {
    /* Why: input[type="search"] har platform-specifikke defaults (Safari/WebKit
     * sætter appearance: textfield + egen padding/spacing der ignorerer vores
     * padding-left, så placeholder-teksten lægger sig oven på vores ikon).
     * appearance: none nulstiller alle native styles. box-sizing er defensiv
     * dublering selvom .kmo-portal * allerede sætter border-box. */
    appearance: none; -webkit-appearance: none;
    box-sizing: border-box;
    width: 100%; height: 32px;
    padding: 0 10px 0 34px;
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius);
    background: var(--kmo-bg);
    font: inherit; font-size: 13px;
    color: var(--kmo-text);
    text-align: center;
    /* Skjul WebKit/Blink's native search-cancel-knap (lille X i højre side)
     * der ellers konflikter med ren visuel design. */
}
.kmo-topbar__search input::-webkit-search-decoration,
.kmo-topbar__search input::-webkit-search-cancel-button,
.kmo-topbar__search input::-webkit-search-results-button,
.kmo-topbar__search input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    display: none;
}
.kmo-topbar__search input:focus {
    outline: none; border-color: var(--kmo-primary);
    background: var(--kmo-surface);
}
.kmo-topbar__search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px;
    display: flex; align-items: center; justify-content: center;
    color: var(--kmo-text-faint); pointer-events: none;
}
.kmo-topbar__search-icon svg { display: block; }

.kmo-topbar__icon-btn {
    width: 32px; height: 32px;
    /* Why: flex-shrink:0 — uden den krymper knappen i en trang topbar (mobil /
     * lange crumbs) under 32px og deformeres til en oval, så ikonet havner
     * skævt. Låser boksen så grid place-items altid centrerer i en 32x32. */
    flex: 0 0 auto;
    display: grid; place-items: center;
    padding: 0;
    border: 1px solid transparent;
    background: transparent;
    border-radius: var(--kmo-radius);
    color: var(--kmo-text-muted);
    cursor: pointer;
    position: relative;
}
.kmo-topbar__icon-btn svg { display: block; }
.kmo-topbar__icon-btn:hover {
    background: var(--kmo-surface-2);
    color: var(--kmo-text);
}
.kmo-topbar__icon-btn .dot {
    position: absolute; top: 6px; right: 7px;
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--kmo-primary);
    border: 2px solid var(--kmo-surface);
}

/* 0.11 — BC connection status-indikator + popover.
 * Status-dot er fast 8px og positioneret midt i 32px-knappen. Farverne kommer
 * fra theme variables med fallbacks. Popoveren er en simpel absolutely-
 * positioned bubble — vises kun når data-kmo-bc-status-popover ikke har
 * hidden-attributten (JS toggler den ved klik). */
.kmo-bc-status {
    position: relative;
}
.kmo-bc-status__dot-btn {
    /* Inherits .kmo-topbar__icon-btn styling via the shared class — denne
     * regel sætter kun statussens midte-dot uden absolute-positioning. */
}
.kmo-bc-status__dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--kmo-success, #10B981);
    box-shadow: 0 0 0 2px var(--kmo-surface);
    transition: background-color 120ms ease-out;
}
.kmo-bc-status[data-status="online"] .kmo-bc-status__dot {
    background: var(--kmo-success, #10B981);
}
.kmo-bc-status[data-status="degraded"] .kmo-bc-status__dot {
    background: var(--kmo-warning, #F59E0B);
    /* Subtil pulse så bruger opdager den uden at den skriger */
    animation: kmo-bc-pulse 2.4s ease-in-out infinite;
}
.kmo-bc-status[data-status="offline"] .kmo-bc-status__dot,
.kmo-bc-status[data-status="unconfigured"] .kmo-bc-status__dot {
    background: var(--kmo-danger, #E53E3E);
    animation: kmo-bc-pulse 1.6s ease-in-out infinite;
}
@keyframes kmo-bc-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.45; }
}

.kmo-bc-status__popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 280px;
    padding: 14px;
    background: var(--kmo-surface);
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius-lg, 8px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 50;
    font-size: 13px;
    line-height: 1.5;
}
.kmo-bc-status__popover[hidden] { display: none; }
.kmo-bc-status__head {
    display: flex; flex-direction: column; gap: 2px;
    margin-bottom: 10px;
}
.kmo-bc-status__head strong { font-size: 13.5px; }
.kmo-bc-status__head .kmo-muted { font-size: 11.5px; }
.kmo-bc-status__body {
    margin: 0 0 12px;
    color: var(--kmo-text-muted);
    font-size: 12.5px;
}
.kmo-bc-status__popover .kmo-btn--sm { width: 100%; }

.kmo-topbar__user {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 8px 4px 4px;
    border-radius: 999px;
    cursor: pointer;
    border: none; background: transparent;
    font-family: inherit;
    color: inherit;
}
.kmo-topbar__user:hover { background: var(--kmo-surface-2); }
.kmo-topbar__avatar {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--kmo-primary);
    color: #fff;
    display: grid; place-items: center;
    font-size: 11.5px;
    font-weight: 600;
}
.kmo-topbar__user-name { font-size: 13px; font-weight: 600; }
.kmo-topbar__user-role { font-size: 11px; color: var(--kmo-text-muted); }


/* ===== Page wrapper ===== */
.kmo-page {
    max-width: var(--kmo-page-max);
    margin: 0 auto;
    padding: var(--kmo-gap-lg) 32px var(--kmo-section-y);
    min-width: 0;
    overflow-x: hidden;
}
.kmo-page--narrow { max-width: 800px; }
.kmo-page--wide   { max-width: 1600px; }
.kmo-page--full   { max-width: none; }

.kmo-page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--kmo-gap-lg);
    margin-bottom: var(--kmo-gap-lg);
    flex-wrap: wrap;
}
.kmo-page-header__title {
    display: flex; flex-direction: column; gap: 4px;
    flex: 1; min-width: 0;
}
.kmo-page-header__lede {
    color: var(--kmo-text-muted);
    font-size: 13.5px;
}
.kmo-page-header__actions { display: flex; gap: 8px; align-items: center; }


/* ===== Cards / surfaces ===== */
.kmo-card {
    background: var(--kmo-surface);
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius-lg);
    overflow: hidden;
}
.kmo-card__head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--kmo-border);
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
}
.kmo-card__head h2,
.kmo-card__head h3 { font-size: 14px; }
/* Klikbar kort-overskrift: skal se ud som overskriften, ikke som et link,
   indtil man peger på den. */
.kmo-card__head-link { color: inherit; text-decoration: none; }
.kmo-card__head-link:hover,
.kmo-card__head-link:focus-visible { color: var(--kmo-primary); text-decoration: underline; }
.kmo-card__body { padding: 18px; }
.kmo-card__body--flush { padding: 0; }


/* ===== Buttons ===== */
.kmo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border-radius: var(--kmo-radius);
    border: 1px solid var(--kmo-border-strong);
    background: var(--kmo-surface);
    color: var(--kmo-text);
    font: inherit; font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: background .12s, border-color .12s, color .12s;
}
.kmo-btn:hover { background: var(--kmo-surface-2); text-decoration: none; }
.kmo-btn--primary {
    background: var(--kmo-primary);
    color: #fff;
    border-color: var(--kmo-primary);
}
.kmo-btn--primary:hover {
    background: var(--kmo-primary-hover);
    border-color: var(--kmo-primary-hover);
    color: #fff;
}
/* Why: theme stylesheets often set a { color: <theme-link> } with enough
   specificity to override .kmo-btn--primary. Compound selector wins without !important. */
.kmo-portal a.kmo-btn--primary,
.kmo-portal a.kmo-btn--primary:hover,
.kmo-portal a.kmo-btn--primary:visited { color: #fff; }
.kmo-btn--ghost {
    border-color: transparent;
    background: transparent;
    color: var(--kmo-text-muted);
}
.kmo-btn--ghost:hover { background: var(--kmo-surface-2); color: var(--kmo-text); }
.kmo-btn--danger { color: var(--kmo-error); border-color: var(--kmo-error); }
.kmo-btn--danger:hover { background: var(--kmo-error-soft); }
.kmo-btn--sm   { height: 28px; padding: 0 10px; font-size: 12.5px; }
.kmo-btn--lg   { height: 40px; padding: 0 18px; font-size: 14px; }
.kmo-btn--full { width: 100%; }
.kmo-btn:disabled,
.kmo-btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }

/* Checkout-knap: navn på linje 1, klinik-lokation på en dæmpet linje 2.
   Overstyrer .kmo-btn's nowrap + faste højde, så et langt "navn · lokation"
   ikke bliver klippet men brydes pænt i to. Falder tilbage til én linje når
   lokations-span'et udelades (klinik uden postnr/by). */
.kmo-cart-checkout {
    flex-direction: column;
    gap: 1px;
    height: auto;
    min-height: 40px;
    padding-top: 7px;
    padding-bottom: 7px;
    line-height: 1.25;
    white-space: normal;
}
.kmo-cart-checkout__loc {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.85;
}


/* ===== Tabs ===== */
.kmo-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--kmo-border);
    margin-bottom: var(--kmo-gap);
    flex-wrap: wrap;
}
.kmo-tabs__btn {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: 10px 16px;
    font: inherit;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--kmo-text-muted);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
    border-radius: 0;
    transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.kmo-tabs__btn:hover { color: var(--kmo-text); background: var(--kmo-surface-2); }
.kmo-tabs__btn.is-active,
.kmo-tabs__btn[aria-selected="true"] {
    color: var(--kmo-primary, var(--kmo-brand, #3346D6));
    border-bottom-color: var(--kmo-primary, var(--kmo-brand, #3346D6));
    background: transparent;
}
.kmo-tabs__btn .count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 18px;
    padding: 0 6px;
    border-radius: 9px;
    background: var(--kmo-surface-2);
    color: var(--kmo-text-muted);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.kmo-tabs__btn.is-active .count,
.kmo-tabs__btn[aria-selected="true"] .count {
    background: var(--kmo-brand-soft, #EEF2FF);
    color: var(--kmo-primary, var(--kmo-brand, #3346D6));
}
.kmo-tabs__btn:focus-visible {
    outline: 2px solid var(--kmo-primary, var(--kmo-brand, #3346D6));
    outline-offset: 2px;
}


/* ===== Form controls ===== */
.kmo-input,
.kmo-select,
.kmo-textarea,
input[type="text"].kmo-input,
input[type="email"].kmo-input,
input[type="password"].kmo-input,
input[type="search"].kmo-input,
input[type="date"].kmo-input,
input[type="number"].kmo-input,
select.kmo-input,
select.kmo-select {
    width: 100%;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--kmo-border-strong);
    border-radius: var(--kmo-radius);
    background: var(--kmo-surface);
    font: inherit; font-size: 13.5px;
    color: var(--kmo-text);
    box-sizing: border-box;
}
.kmo-textarea { height: auto; padding: 8px 10px; resize: vertical; }
.kmo-input:focus,
.kmo-select:focus,
.kmo-textarea:focus {
    outline: none;
    border-color: var(--kmo-primary);
    box-shadow: 0 0 0 3px var(--kmo-primary-soft);
}

.kmo-field { display: flex; flex-direction: column; gap: 6px; }
.kmo-field__label { font-size: 12.5px; font-weight: 500; color: var(--kmo-text-muted); }
.kmo-field__hint  { font-size: 12px; color: var(--kmo-text-faint); }
.kmo-field--inline { flex-direction: row; align-items: center; gap: 12px; }
/* Why: browserens [hidden]-regel kommer fra UA-stylesheet'et og taber til
   enhver author-regel med display. .kmo-field (flex) og .kmo-tip (inline-grid)
   overtrumfede den, så elementer JS satte hidden=true på blev vist alligevel. */
.kmo-field[hidden],
.kmo-tip[hidden] { display: none; }


/* ===== Tables ===== */
.kmo-tbl { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.kmo-tbl th,
.kmo-tbl td {
    padding: var(--kmo-cell-y) var(--kmo-cell-x);
    border-bottom: 1px solid var(--kmo-border);
    text-align: left;
    vertical-align: middle;
}
.kmo-tbl thead th {
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--kmo-text-muted);
    font-weight: 600;
    background: var(--kmo-surface-2);
}
.kmo-tbl tbody tr:last-child td { border-bottom: none; }
.kmo-tbl tbody tr:hover td { background: var(--kmo-surface-2); }
.kmo-tbl td.num,
.kmo-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.kmo-tbl td.mono { font-family: var(--kmo-font-mono); font-size: 12.5px; }
.kmo-tbl__col-action { width: 1%; white-space: nowrap; text-align: right; }
.kmo-tbl__sub {
    margin-top: 3px;
    font-family: var(--kmo-font);
    font-weight: 400;
    font-size: 12px;
    color: var(--kmo-text-muted);
    line-height: 1.35;
}
.kmo-tbl__sub-sep { color: var(--kmo-border-strong); margin: 0 4px; }
/* Sporingslink i ordrelisten: rækken er klikbar, så linket skal se ud som et link. */
.kmo-tbl__sub a[data-no-detail] {
    color: var(--kmo-text-muted);
    font-family: var(--kmo-font-mono);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.kmo-tbl__sub a[data-no-detail]:hover { color: var(--kmo-text); }


/* ===== Pills / badges ===== */
.kmo-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.5;
    background: var(--kmo-surface-2);
    color: var(--kmo-text-muted);
    border: 1px solid transparent;
    white-space: nowrap;
}
.kmo-pill--ok     { background: var(--kmo-success-soft); color: var(--kmo-success); }
.kmo-pill--warn   { background: var(--kmo-warning-soft); color: var(--kmo-warning); }
.kmo-pill--err    { background: var(--kmo-error-soft); color: var(--kmo-error); }
.kmo-pill--info   { background: var(--kmo-info-soft); color: var(--kmo-primary); }
.kmo-pill--accent { background: var(--kmo-primary-soft); color: var(--kmo-primary); }
.kmo-pill__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
/* Engangsmærket: neutralt, ikke en advarsel — en egenskab ved varen. */
.kmo-pill--single-use { background: var(--kmo-surface); color: var(--kmo-text); border-color: var(--kmo-border-strong); }
.kmo-single-use-icon { flex: none; }
/* Overlay i hjørnet af varebilledet (katalogliste + varesiden). Øverst til
   højre — zoom-knappen på varesiden sidder nederst til højre. */
.kmo-single-use-mark {
    position: absolute; top: 3px; right: 3px; z-index: 1;
    display: inline-flex; padding: 2px;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--kmo-border-strong);
    border-radius: 50%;
    color: var(--kmo-text);
    line-height: 0;
    pointer-events: none;
}
.kmo-single-use-mark--lg { top: 10px; right: 10px; padding: 4px; }


/* ===== Notices ===== */
.kmo-notice {
    display: flex;
    gap: 12px;
    padding: 12px 14px;
    border-radius: var(--kmo-radius);
    background: var(--kmo-info-soft);
    color: var(--kmo-primary);
    border-left: 3px solid var(--kmo-primary);
    font-size: 13px;
}
.kmo-notice--warn { background: var(--kmo-warning-soft); color: #5a3b0d; border-left-color: var(--kmo-warning); }
.kmo-notice--err  { background: var(--kmo-error-soft);   color: #6f1f1f; border-left-color: var(--kmo-error); }
.kmo-notice--ok   { background: var(--kmo-success-soft); color: #1a4d31; border-left-color: var(--kmo-success); }
.kmo-notice__icon { flex-shrink: 0; margin-top: 1px; }
.kmo-notice[hidden] { display: none; }

/* Returns scan feedback (aria-live) — #199/#201. */
.kmo-returns-scan-feedback { margin: 6px 0 0; font-size: 13px; }
.kmo-returns-scan-feedback.is-ok  { color: var(--kmo-success, #1a4d31); }
.kmo-returns-scan-feedback.is-err { color: var(--kmo-error, #6f1f1f); }
.kmo-returns-scan-feedback[hidden] { display: none; }

/* Toast host — shared non-blocking notices (session-expiry, clinic-switch
   failure, etc.). Reuses .kmo-notice styling for each toast body. */
.kmo-toast-host {
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: min(420px, calc(100vw - 32px));
    pointer-events: none;
}
.kmo-toast {
    pointer-events: auto;
    box-shadow: var(--kmo-shadow, 0 4px 16px rgba(0,0,0,0.12));
    align-items: center;
    animation: kmo-toast-in 160ms ease-out;
}
.kmo-toast__msg { flex: 1; }
.kmo-toast__action {
    flex-shrink: 0;
    background: none;
    border: 1px solid currentColor;
    color: inherit;
    border-radius: var(--kmo-radius);
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}
.kmo-toast__close {
    flex-shrink: 0;
    background: none;
    border: 0;
    color: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    opacity: 0.6;
}
.kmo-toast__close:hover { opacity: 1; }
@keyframes kmo-toast-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }


/* ===== Utility ===== */
.kmo-muted { color: var(--kmo-text-muted); }
.kmo-faint { color: var(--kmo-text-faint); }
.kmo-mono  { font-family: var(--kmo-font-mono); font-variant-numeric: tabular-nums; }
.kmo-tnum  { font-variant-numeric: tabular-nums; }
.kmo-row   { display: flex; gap: 12px; align-items: center; }
.kmo-row--between { justify-content: space-between; }
.kmo-col   { display: flex; flex-direction: column; gap: 12px; }
.kmo-gap-sm { gap: 6px; }
.kmo-gap-lg { gap: 18px; }
.kmo-flex-1 { flex: 1; }
.kmo-divider { height: 1px; background: var(--kmo-border); margin: var(--kmo-gap) 0; }


/* ===== Animations ===== */
.kmo-fade-in { animation: kmo-fadeIn .2s ease-out; }
@keyframes kmo-fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: none; }
}


/* ===== Responsive ===== */

/* Desktop-default: skjul mobil-only elementer. De vises kun inde i
 * @media (max-width: 900px) nedenfor. Sætter vi dem ikke til display:none
 * her ville de stå synlige som døde knapper på desktop. */
.kmo-topbar__hamburger,
.kmo-sidebar__close,
.kmo-shell__backdrop { display: none; }

@media (max-width: 900px) {
    .kmo-shell { grid-template-columns: 1fr; }
    .kmo-sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: min(320px, 88vw);
        z-index: 100;
        transform: translateX(-100%);
        transition: transform .2s ease;
        box-shadow: var(--kmo-shadow-lg);
    }
    .kmo-shell.is-mobile-nav-open .kmo-sidebar { transform: none; }

    .kmo-shell__backdrop {
        display: block;
        position: fixed; inset: 0;
        z-index: 99;
        background: rgba(15, 23, 42, 0.5);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }
    .kmo-shell.is-mobile-nav-open .kmo-shell__backdrop {
        opacity: 1;
        pointer-events: auto;
    }

    .kmo-topbar__hamburger { display: grid; }
    .kmo-sidebar__close {
        display: grid;
        place-items: center;
        margin-left: auto;
        width: 36px; height: 36px;
        background: transparent;
        border: 1px solid transparent;
        border-radius: var(--kmo-radius);
        color: var(--kmo-text-muted);
        cursor: pointer;
    }
    .kmo-sidebar__close:hover { background: var(--kmo-surface-2); color: var(--kmo-text); }

    .kmo-topbar { gap: 8px; padding: 0 12px; }
    .kmo-topbar__search { display: none; }
    .kmo-topbar__user-name,
    .kmo-topbar__user-role { display: none; }
    .kmo-topbar__user > span:not(.kmo-topbar__avatar) { display: none; }

    .kmo-page { padding: 16px; }
}

@media (max-width: 600px) {
    .kmo-page { padding: 16px 12px; }
    .kmo-page-header {
        flex-direction: column;
        align-items: stretch;
    }
    .kmo-page-header__actions { flex-wrap: wrap; }

    .kmo-card__head { flex-wrap: wrap; }
    .kmo-card__body { padding: 14px; }

    /* Vis kun den sidste crumb (current page) på smal mobil. */
    .kmo-topbar__crumbs > *:not(:last-child) { display: none; }

    /* Tabs der kan løbe over: tillad vandret scroll i stedet for wrap. */
    .kmo-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .kmo-tabs__btn { flex: 0 0 auto; }
}

/* ===== Tabel-mønstre til mobil =====
 * .kmo-tbl-scroll wrapper: brede admin-tabeller scroller vandret.
 * .kmo-tbl--cards: linje-tabeller (kurv, ordre-detalje, returer) stakker som
 * kort under 600px med data-label på <td> som ::before label.
 * Rækker med colspan markeres .kmo-tbl__row--span og undtages stak-mønstret. */
.kmo-tbl-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 600px) {
    .kmo-tbl--cards { display: block; }
    .kmo-tbl--cards thead { display: none; }
    .kmo-tbl--cards tbody,
    .kmo-tbl--cards tr { display: block; }
    .kmo-tbl--cards tbody tr:not(.kmo-tbl__row--span) {
        padding: 12px;
        border: 1px solid var(--kmo-border);
        border-radius: var(--kmo-radius-lg);
        margin-bottom: 8px;
        background: var(--kmo-surface);
    }
    .kmo-tbl--cards tbody tr:not(.kmo-tbl__row--span) td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        padding: 4px 0;
        border-bottom: none;
        text-align: right;
    }
    .kmo-tbl--cards tbody tr:not(.kmo-tbl__row--span) td::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--kmo-text-muted);
        text-align: left;
        white-space: nowrap;
    }
    .kmo-tbl--cards tbody tr:not(.kmo-tbl__row--span) td[data-label=""]::before,
    .kmo-tbl--cards tbody tr:not(.kmo-tbl__row--span) td:not([data-label])::before { content: none; }
    .kmo-tbl--cards .kmo-tbl__col-action { justify-content: flex-end; }
    .kmo-tbl--cards tr.kmo-tbl__row--span td { display: block; padding: 8px; }
}


/* ============================================================
   Phase 2 — Catalog list-view, product detail, shop context
   ============================================================ */

/* ===== Shop-context bar (active clinic + "spor") =====
   Appears at the top of catalog / cart / product / checkout pages.
   The active track is solid navy and tells the user — beyond doubt —
   which clinic the next "Add to cart" will affect. */
.kmo-shop-ctx {
    background: var(--kmo-surface);
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius-lg);
    padding: 4px;
    display: flex;
    gap: 4px;
    margin-bottom: var(--kmo-gap-lg);
    flex-wrap: wrap;
    /* Cirka to raekker. En region har 24 afdelinger, og uden loftet fylder
       vaelgeren fem raekker oeverst paa hver eneste bestillingsside. Faerre
       end ~6 afdelinger rammer aldrig loftet, saa baren ser ud praecis som
       foer for en klinikkaede. portal.js ruller den aktive afdeling ind i
       feltet, saa "Bestiller til" aldrig ligger skjult under kanten. */
    max-height: 152px;
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
}
/* Kurv-baren viser kun klinikker MED varer, saa en tom kurv efterlader et
   tomt element der ellers males som en naegen vandret streg under sidens
   overskrift. */
.kmo-shop-ctx:empty { display: none; }

/* Kunde-gruppering (1.20.0). Vises KUN naar brugeren har mere end én kunde —
   en bruger med ét medlemskab faar praecis den flade stribe som foer.
   Gruppen tager hele bredden og lader sine egne spor ombryde indeni, saa to
   kunders afdelinger aldrig blander sig paa samme raekke. */
.kmo-shop-ctx__group {
    flex: 1 1 100%;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.kmo-shop-ctx__group-hd {
    flex: 1 1 100%;
    padding: 6px 8px 2px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kmo-text-muted);
}
/* Gruppe nr. 2 og frem faar en skillelinje — kundeskift er et stoerre spring
   end et afdelingsskift, og det skal kunne ses uden at laese. */
.kmo-shop-ctx__group + .kmo-shop-ctx__group { border-top: 1px solid var(--kmo-border); padding-top: 4px; }

/* Kundeskift henter siden forfra (ACL og priser skifter samtidig). Marker
   ventetiden frem for at lade baren staa doed. */
.kmo-shop-ctx.is-switching { opacity: 0.6; pointer-events: none; }
.kmo-shop-ctx__track.is-pending { outline: 2px solid var(--kmo-accent); outline-offset: -2px; }
.kmo-shop-ctx__track {
    /* Basis 220px og ikke 0: med flex-basis:0 + min-width:0 krymper sporet
       forbi sit eget indhold, og da __count er flex-shrink:0 mens __body er
       min-width:0, var klinikNAVNET det der blev presset til nul bredde —
       en region med 24 afdelinger viste 24 knapper der alle kun sagde "Tom".
       En rigtig basis får rækken til at ombryde i stedet for at kollapse. */
    flex: 1 1 220px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--kmo-radius);
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    text-align: left;
    font-family: inherit;
    color: var(--kmo-text-muted);
    text-decoration: none;
    transition: background .12s, color .12s;
    min-width: 0;
}
.kmo-shop-ctx__track:hover { background: var(--kmo-surface-2); color: var(--kmo-text); text-decoration: none; }
.kmo-shop-ctx__track.is-active {
    background: var(--kmo-primary);
    color: #fff;
    box-shadow: 0 1px 2px rgba(15,23,42,0.08);
}
.kmo-shop-ctx__track.is-active .kmo-shop-ctx__sub,
.kmo-shop-ctx__track.is-active .kmo-shop-ctx__count { color: rgba(255,255,255,0.78); }
.kmo-shop-ctx__body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kmo-shop-ctx__name {
    font-weight: 600; font-size: 14px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kmo-shop-ctx__name-lbl {
    font-size: 10.5px; letter-spacing: 0.07em; font-weight: 600;
    opacity: 0.7; margin-right: 6px; text-transform: uppercase;
}
.kmo-shop-ctx__sub {
    font-size: 11.5px; color: var(--kmo-text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kmo-shop-ctx__count {
    display: flex; align-items: center; gap: 4px;
    font-size: 12px;
    color: var(--kmo-text-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    font-weight: 500;
}
.kmo-shop-ctx__count strong { color: inherit; font-weight: 700; }


/* ===== Catalog — list rows ===== */
.kmo-catalog-toolbar {
    display: flex; gap: 12px; align-items: center;
    margin-bottom: var(--kmo-gap);
    flex-wrap: wrap;
    /* Søgefeltet følger med ned ad listen (søgeplanens U2): kunden der har
       rullet 40 rækker, skal ikke op igen for at rette sin søgning. */
    /* Over rækkernes hover (10) og forhåndsvisning (20): ellers dækker en
       række forslagsboksen, der bor inde i værktøjslinjens stak. */
    position: sticky; top: var(--kmo-topbar-h); z-index: 30;
    background: var(--kmo-bg); padding: 8px 0;
}
.kmo-catalog-toolbar__search { flex: 1 1 320px; min-width: 240px; max-width: 560px; position: relative; }
.kmo-catalog-toolbar__search input {
    /* Samme appearance: none-fix som .kmo-topbar__search — WebKit's native
     * search-styling ignorerer ellers vores padding og lader placeholder
     * løbe ind under ikonet. */
    appearance: none; -webkit-appearance: none;
    box-sizing: border-box;
    width: 100%; height: 40px;
    padding: 0 64px 0 34px;
    border: 1px solid var(--kmo-border-strong);
    border-radius: var(--kmo-radius);
    background: var(--kmo-surface);
    /* Venstrestillet og 15 px (U3): man læser sin egen søgning fra venstre. */
    font: inherit; font-size: 15px;
    text-align: left;
}
/* På en telefon fylder linjen (felt + sortering + kurv) ~110 px; klistret
   ville den æde en tredjedel af listen. */
@media (max-width: 700px) {
    .kmo-catalog-toolbar { position: static; padding: 0; }
}
.kmo-catalog-partial {
    margin: 0 0 10px; padding: 8px 12px;
    border-radius: var(--kmo-radius); background: var(--kmo-info-soft, #EAF2FA);
    font-size: 13px; color: var(--kmo-text);
}
.kmo-catalog-empty__tips { margin: 10px 0 0; padding-left: 18px; text-align: left; font-size: 13.5px; }
.kmo-link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--kmo-primary); text-decoration: underline; cursor: pointer; }

/* Forslag mens man skriver og det tomme felt (søgeplanen 4.7, 4.13). */
.kmo-suggest {
    position: absolute; top: calc(100% + 4px); left: 0; z-index: 60;
    width: max(100%, 460px); max-height: min(70vh, 560px); overflow-y: auto;
    background: var(--kmo-surface, #fff); border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius); box-shadow: 0 12px 32px rgba(15, 30, 50, .16);
    font-size: 14px; line-height: 1.4; padding: 4px 0;
}
.kmo-suggest[hidden] { display: none; }
.kmo-suggest__head { padding: 10px 14px 4px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--kmo-text-muted); }
.kmo-suggest__opt { display: flex; align-items: center; gap: 10px; padding: 7px 14px; cursor: pointer; }
.kmo-suggest__opt:hover, .kmo-suggest__opt.is-active { background: var(--kmo-primary-soft, #EAF2FA); }
.kmo-suggest__opt mark { background: none; color: inherit; font-weight: 700; }
.kmo-suggest__item { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.kmo-suggest__item > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kmo-suggest__sub { font-size: 12px; color: var(--kmo-text-muted); }
.kmo-suggest__stock { margin-left: auto; font-size: 11.5px; color: var(--kmo-success, #2E7D4F); white-space: nowrap; }
.kmo-suggest__chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 14px 8px; }
.kmo-suggest__chip { border: 1px solid var(--kmo-border); background: var(--kmo-surface-2, #F4F6F8); border-radius: 999px; padding: 4px 11px; font: inherit; font-size: 13px; cursor: pointer; color: var(--kmo-text); }
.kmo-suggest__chip:hover { border-color: var(--kmo-primary); }
.kmo-suggest__foot { display: flex; justify-content: space-between; gap: 10px; padding: 8px 14px; margin-top: 4px; border-top: 1px solid var(--kmo-border); font-size: 12px; color: var(--kmo-text-muted); }
@media (max-width: 700px) {
    /* Mobil: 16 px i feltet (ingen zoom), og forslagene fylder skærmen under feltet. */
    .kmo-catalog-toolbar__search input { font-size: 16px; }
    .kmo-suggest { position: fixed; left: 0; right: 0; bottom: 0; top: var(--kmo-suggest-top, 120px); width: auto; max-height: none; border-radius: 0; border-width: 1px 0 0; box-shadow: none; }
    .kmo-suggest__opt { padding: 11px 16px; min-height: 44px; }
}
.kmo-catalog-toolbar__search input::-webkit-search-decoration,
.kmo-catalog-toolbar__search input::-webkit-search-cancel-button,
.kmo-catalog-toolbar__search input::-webkit-search-results-button,
.kmo-catalog-toolbar__search input::-webkit-search-results-decoration {
    -webkit-appearance: none;
    display: none;
}
.kmo-catalog-toolbar__search input:focus {
    outline: none; border-color: var(--kmo-primary);
    box-shadow: 0 0 0 3px var(--kmo-primary-soft);
}
.kmo-catalog-toolbar__search-icon {
    position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
    width: 14px; height: 14px;
    display: flex; align-items: center; justify-content: center;
    color: var(--kmo-text-faint); pointer-events: none;
}
.kmo-catalog-toolbar__search-icon svg { display: block; }
/* "Søg" i feltets højre side: søgningen starter først her eller på Enter. */
.kmo-catalog-toolbar__search-go {
    position: absolute; top: 4px; right: 4px; height: 32px; padding: 0 14px;
    border: 0; border-radius: calc(var(--kmo-radius) - 2px);
    background: var(--kmo-primary); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.kmo-catalog-toolbar__search-go:hover { filter: brightness(1.08); }
.kmo-catalog-toolbar__search-go:focus-visible { outline: 2px solid var(--kmo-primary); outline-offset: 2px; }

.kmo-catalog-toolbar__cart-link {
    display: inline-flex; align-items: center; gap: 6px;
    height: 36px; padding: 0 14px;
    white-space: nowrap;
    text-decoration: none;
}
.kmo-catalog-toolbar__cart-link:hover { text-decoration: none; }
.kmo-catalog-toolbar__cart-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 20px; height: 18px; padding: 0 6px;
    border-radius: 999px;
    background: rgba(255,255,255,0.22);
    color: #fff;
    font-size: 11px; font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kmo-catalog__layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--kmo-gap-lg);
    align-items: flex-start;
}
.kmo-facet-rail { width: 220px; flex-shrink: 0; }

/* Filter-knappen findes kun paa smal skaerm. */
.kmo-facet-rail__toggle { display: none; }

@media (max-width: 900px) {
    .kmo-catalog__layout { grid-template-columns: 1fr; }

    /* Skinnen var 220 px bred i en kolonne paa 390, stablet OVER resultaterne.
       Maalt 2026-09-18: kunden scroller forbi ~30 leverandoer-checkbokse foer
       den foerste vare. Den foldes derfor sammen og aabnes med en knap — det
       moenster en mobilbutik loeser det med — og den fylder bredden naar den
       er aabnet. */
    .kmo-facet-rail {
        width: auto;
        display: none;
        margin-bottom: var(--kmo-gap);
        padding: var(--kmo-gap);
        border: 1px solid var(--kmo-border);
        border-radius: var(--kmo-radius-lg);
        background: var(--kmo-surface);
    }
    .kmo-catalog.is-filters-open .kmo-facet-rail { display: block; }

    .kmo-facet-rail__toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        min-height: 40px;
        margin-bottom: var(--kmo-gap);
        padding: 0 12px;
        border: 1px solid var(--kmo-border);
        border-radius: var(--kmo-radius);
        background: var(--kmo-surface);
        color: var(--kmo-text);
        font: inherit;
        font-weight: 500;
        cursor: pointer;
    }
    .kmo-facet-rail__toggle[aria-expanded="true"] {
        border-color: var(--kmo-border-strong);
    }

    /* Antal aktive filtre. Uden det er et sat filter usynligt naar skinnen er
       lukket, og en tom resultatliste ligner en fejl frem for et valg. */
    .kmo-facet-rail__badge {
        margin-left: auto;
        min-width: 20px;
        padding: 1px 6px;
        border-radius: 999px;
        background: var(--kmo-primary);
        color: #fff;
        font-size: 12px;
        font-weight: 600;
        text-align: center;
    }
}
.kmo-facet { padding: 14px 0; border-bottom: 1px solid var(--kmo-border); }
.kmo-facet:first-child { padding-top: 0; }
.kmo-facet:last-child  { border-bottom: none; }
.kmo-facet__title {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--kmo-text-muted); font-weight: 600; margin-bottom: 10px;
}
/* Sammenklappelig gruppe-overskrift. Skinnen vokser med sortimentet, ikke med
   koden: dev har 7 leverandoerer, driften 29. Hele knappen er klikbar, saa
   maalet er hele raekkens bredde og ikke en pil paa 12 px. */
.kmo-facet__title--btn {
    display: flex; align-items: center; gap: 6px;
    width: 100%;
    background: none; border: 0; padding: 0 0 10px;
    margin: 0;
    font: inherit; font-size: 12px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--kmo-text-muted);
    cursor: pointer;
    text-align: left;
}
.kmo-facet__title--btn:hover { color: var(--kmo-text); }
.kmo-facet__title-caret {
    display: inline-block;
    font-size: 9px;
    transition: transform .12s ease;
}
.kmo-facet__title--btn[aria-expanded="false"] .kmo-facet__title-caret {
    transform: rotate(-90deg);
}
/* Antallet af valgte i en lukket gruppe. Uden det er et aktivt filter usynligt
   naar gruppen er klappet sammen — samme fejl som mobilskinnens badge loeser. */
.kmo-facet__title-badge {
    margin-left: auto;
    background: var(--kmo-primary-soft, #eaecfb);
    color: var(--kmo-primary, #3346D6);
    border-radius: 999px;
    padding: 1px 7px;
    font-size: 11px;
    letter-spacing: 0;
}
.kmo-facet__body[hidden] { display: none; }
.kmo-facet__opt {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0; font-size: 13.5px;
    color: var(--kmo-text); cursor: pointer;
}
/* accent-color, ellers tegner browseren radioknapper og afkrydsningsfelter i
   SIN blaa — maalt: Chrome bruger sin egen accent naar `accent-color` er
   `auto`, og filterskinnen stod dermed med en klar blaa markering der ikke
   findes i portalens palet (--kmo-primary er #1C3D5A, et moerkt marineblaat).
   Det gjaldt baade den afkrydsede knap og hover-ringen paa de oevrige.

   Portalen satte den allerede paa .kmo-radio-card og i konfiguratoren;
   skinnen var bare aldrig kommet med. */
.kmo-facet__opt input,
.kmo-facet-check input { margin: 0; accent-color: var(--kmo-primary); }
/* Udfoldnings-pilen i kategoritræet. Knuder uden børn får en lige så bred tom
   plads, så etiketterne står på linje uanset om rækken kan foldes ud. */
.kmo-facet__toggle {
    flex: 0 0 18px; width: 18px;
    font-size: 16px; line-height: 1;
    color: var(--kmo-text);
    cursor: pointer; user-select: none;
    text-align: center;
    /* Klikfladen er større end pilen: padding op/ned med modsvarende negativ
       margin, så rækkehøjden ikke ændrer sig. En 14px-trekant er til at se,
       men ikke til at ramme — slet ikke med en finger. */
    padding: 6px 0;
    margin: -6px 0;
    border-radius: 3px;
}
.kmo-facet__toggle:hover { color: var(--kmo-text); background: var(--kmo-surface-alt, rgba(0,0,0,.05)); }
.kmo-facet__toggle--none { cursor: default; padding: 0; margin: 0; }
.kmo-facet__count {
    margin-left: auto;
    color: var(--kmo-text-faint);
    font-size: 12.5px;
    font-variant-numeric: tabular-nums;
}

.kmo-catalog-list {
    display: flex;
    flex-direction: column;
    background: var(--kmo-surface);
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius-lg);
    overflow: hidden;
    transition: opacity 120ms ease-out;
}
/* While a filter request is in flight, dim the existing rows instead of
 * blanking the list. Keeps the layout stable on slow networks. */
.kmo-catalog-list.is-loading {
    opacity: 0.55;
    pointer-events: none;
}
.kmo-catalog-row {
    display: grid;
    grid-template-columns: 72px minmax(0, 1.8fr) minmax(0, 1fr) minmax(0, auto) minmax(0, auto);
    gap: 12px;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid var(--kmo-border);
    cursor: pointer;
    transition: background .16s ease;
    color: inherit;
    text-decoration: none;
    min-width: 0;
    position: relative;
}
.kmo-catalog-row:last-child { border-bottom: none; }
.kmo-catalog-row:hover { background: #FCFDFE; text-decoration: none; z-index: 10; }

/* Navy kant der tørres ind fra rækkens venstre kant. ::before frem for en
   border-left, så rækkens bredde ikke ændrer sig 2 px på hover. */
.kmo-catalog-row::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 2px; background: var(--kmo-primary);
    transform: scaleY(0);
    transition: transform .18s cubic-bezier(.4, 0, .2, 1);
}
.kmo-catalog-row:hover::before { transform: scaleY(1); }

.kmo-catalog-row__thumb {
    width: 72px; height: 72px;
    border-radius: var(--kmo-radius);
    background: repeating-linear-gradient(135deg, #F1F4F7 0 8px, #E8ECF1 8px 16px);
    position: relative;
    flex-shrink: 0;
}
/* contain, ikke cover. Instrumenterne er lange og tynde, og en 4:3-ramme med
   cover skar begge spidser af — netop dét kunden vil se. Hvid flade under,
   så det beskårne område ikke ligner en del af produktet. */
.kmo-catalog-row__thumb:has(img) {
    background: var(--kmo-surface);
    border: 1px solid var(--kmo-border);
}
.kmo-catalog-row__thumb img {
    width: 100%; height: 100%; object-fit: contain; display: block;
    border-radius: var(--kmo-radius);
}
/* Hover-kortet (1.5.x). Hænger UNDER rækken og vokser ned/til højre.

   Første udgave var forankret i billedets øverste venstre hjørne. Renderet mod
   den rigtige side dækkede den varens eget navn: billedet er 72 px højt i en
   ~96 px række, så et kort fra billedets top lander oven i navnekolonnen. Nu
   starter det under rækken — den vare man peger på forbliver læsbar, og det er
   rækkerne under der dækkes, som man er på vej væk fra.

   transform-origin i hjørnet gør at kortet stadig gror UD AF billedet i stedet
   for at poppe op. Uden pointer-events: none kan musen fanges af kortet og
   efterlade rækken hængende i hover-tilstand. */
.kmo-catalog-row__preview {
    position: absolute;
    top: calc(100% + 8px); left: -1px;
    width: 348px;
    background: var(--kmo-surface);
    border: 1px solid var(--kmo-border-strong);
    border-radius: var(--kmo-radius-lg);
    box-shadow: var(--kmo-shadow-lg);
    padding: 10px;
    opacity: 0;
    transform: scale(.42);
    transform-origin: top left;
    pointer-events: none;
    transition: opacity .16s ease, transform .22s cubic-bezier(.34, 1.2, .64, 1);
    z-index: 20;
}
/* Ét billede = smallere kort. Ingen tom plads for noget der ikke findes —
   59 % af sortimentet har kun ét foto. */
.kmo-catalog-row__preview.is-single { width: 200px; }
.kmo-catalog-row:hover .kmo-catalog-row__preview { opacity: 1; transform: scale(1); }
/* Hover-kortets billede er mindre end varesidens: symbolet tættere på kanten. */
.kmo-catalog-row__preview-shot .kmo-single-use-mark--lg { top: 6px; right: 6px; padding: 3px; }
/* Nederst i listen ville kortet løbe ud under kortkanten. JS sætter flaget på
   de sidste rækker, og så vender det opad i stedet. */
.kmo-catalog-row__preview.is-flipped {
    top: auto; bottom: calc(100% + 8px);
    transform-origin: bottom left;
}
.kmo-catalog-row__preview-shots { display: flex; gap: 8px; }
.kmo-catalog-row__preview-shot {
    flex: 1 1 0;
    aspect-ratio: 1 / 1;
    border-radius: var(--kmo-radius);
    overflow: hidden;
    background: var(--kmo-surface);
    border: 1px solid var(--kmo-border);
    position: relative;
}
.kmo-catalog-row__preview-shot img {
    width: 100%; height: 100%; object-fit: contain; display: block;
}
.kmo-catalog-row__preview-tag {
    position: absolute; left: 4px; bottom: 4px;
    font-size: 9px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase;
    background: rgba(255,255,255,.92);
    color: var(--kmo-text-muted);
    padding: 1px 5px;
    border-radius: 2px;
}
.kmo-catalog-row__preview-qualifier,
.kmo-catalog-row__preview-text {
    margin-top: 9px;
    font-size: 12.5px;
    line-height: 1.45;
}
/* Skillelinjen hører til FØRSTE tekstblok under billederne, hvilken det så end
   er. Lå den fast på -text, fik et kort med begge blokke to hårstreger 9px fra
   hinanden, og et kort med kun kvalifikator fik ingen. */
.kmo-catalog-row__preview-shots + .kmo-catalog-row__preview-qualifier,
.kmo-catalog-row__preview-shots + .kmo-catalog-row__preview-text {
    padding-top: 9px;
    border-top: 1px solid var(--kmo-border);
}
/* Identitet, ikke prosa — samme farveforskel som i rækken selv. */
.kmo-catalog-row__preview-qualifier { color: var(--kmo-text); }
.kmo-catalog-row__preview-text { color: var(--kmo-text-muted); }

/* Uden hover (tablet, telefon) findes kortet ikke — der er ingen vej til det.
   Rækken beholder det større billede, og det er nok. */
@media (hover: none) {
    .kmo-catalog-row__preview { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .kmo-catalog-row,
    .kmo-catalog-row::before,
    .kmo-catalog-row__preview { transition: none; }
}

/* 1.110.0 — hover-kortet for SMI-suturer (Catalog\SutureSpecs::hover).
   Samme bredde som kortet med to billeder, også når der kun er ét: linjen og
   ikonerne skal have plads. SMI's billeder har hvid baggrund. */
.kmo-catalog-row__preview--suture { width: 348px; }
.kmo-catalog-row__preview--suture.is-one-shot .kmo-catalog-row__preview-shot { flex: 0 0 164px; }
.kmo-catalog-row__preview-shot--suture { background: #fff; display: flex; align-items: center; justify-content: center; gap: 2px; padding: 8px; }
.kmo-catalog-row__preview-shot--suture img { width: auto; height: auto; max-width: 100%; max-height: 100%; min-width: 0; }
.kmo-catalog-row__preview-shot--suture.is-two img { max-width: 48%; }
.kmo-catalog-row__preview--suture .kmo-catalog-row__preview-qualifier,
.kmo-catalog-row__preview-line { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: var(--kmo-text); }
.kmo-catalog-row__preview-shots + .kmo-catalog-row__preview-qualifier,
.kmo-catalog-row__preview-shots + .kmo-catalog-row__preview-line {
    margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--kmo-border);
}
.kmo-catalog-row__preview-vary { color: var(--kmo-primary); font-weight: 600; }
.kmo-catalog-row__preview-icons { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; }
.kmo-catalog-row__preview-ico { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--kmo-text-muted); }
.kmo-catalog-row__preview-ico-img {
    width: 38px; height: 38px; flex: none; display: grid; place-items: center;
    background: #fff; border: 1px solid var(--kmo-border); border-radius: var(--kmo-radius);
}
.kmo-catalog-row__preview-ico-img img { max-width: 32px; max-height: 32px; }
.kmo-catalog-row__preview-note { margin-top: 6px; font-size: 11.5px; color: var(--kmo-text-muted); }

/* 1.110.2 — SMI-suturer: SMI's tegninger i produktgalleriet. Tegningerne har
   hvid baggrund, så boksen og miniaturen får det også, når de vises. */
.kmo-pd-media.is-drawing { background: #fff; }
.kmo-pd-thumb.is-drawing { background: #fff; }
.kmo-pd-media-caption { margin: 8px 0 0; font-size: 13px; color: var(--kmo-text); }
.kmo-pd-media-caption__small { display: block; margin-top: 2px; font-size: 12px; color: var(--kmo-text-muted); }
.kmo-pd-suture-line { margin: 10px 0 0; font-size: 13px; color: var(--kmo-text); }
.kmo-pd-suture-line__label { font-weight: 600; margin-right: 6px; }

.kmo-catalog-row__thumb::after {
    content: attr(data-mfr);
    position: absolute;
    bottom: 2px; left: 2px;
    font-size: 9px; font-weight: 600;
    color: var(--kmo-text-muted);
    background: rgba(255,255,255,0.92);
    padding: 1px 4px;
    border-radius: 2px;
    letter-spacing: 0.02em;
}
.kmo-catalog-row__thumb:has(img)::after { display: none; }

/* Genbrugeligt to-kolonne form-grid (profil, password). Falder til én kolonne
 * på telefon — se @media (max-width: 600px). */
.kmo-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    max-width: 560px;
}

.kmo-catalog-row__main { min-width: 0; overflow: hidden; }
/* To linjer, ikke én. Instrumentnavne som "Kelman-Mcpherson Forceps, Ang
   w/5mm tying platform, 10cm" blev afkortet præcis dér hvor målene står — og
   målet er det der skiller to ellers ens varer fra hinanden. Titlen på linket
   bærer hele navnet, så resten kan læses uden at navigere. */
.kmo-catalog-row__name {
    font-size: 14px; font-weight: 600;
    color: var(--kmo-text); line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* U3: navnet er nu et <a> i stedet for at hele rækken er ét link. */
a.kmo-catalog-row__name {
    display: block;
    color: var(--kmo-text);
    text-decoration: none;
}
a.kmo-catalog-row__name:hover { text-decoration: underline; }
a.kmo-catalog-row__name:focus-visible {
    outline: 2px solid var(--kmo-primary);
    outline-offset: 2px;
    border-radius: 2px;
}
/* Beskrivelse 2 — varens kvalifikator (spids-diameter, pakningsstørrelse).
   Fuld tekstfarve som .kmo-pd-qualifier på varesiden: for 129 varer der deler
   navn med en anden er denne linje det eneste der skiller dem, så den er
   identitet og ikke metadata. Står derfor OVER .kmo-catalog-row__meta, som er
   muted og monospace. */
.kmo-catalog-row__qualifier {
    font-size: 12.5px;
    color: var(--kmo-text);
    line-height: 1.35;
    margin-top: 3px;
    text-wrap: pretty;
}

.kmo-catalog-row__meta {
    font-size: 12px; color: var(--kmo-text-muted);
    display: flex; gap: 8px; margin-top: 2px;
    font-family: var(--kmo-font-mono);
    flex-wrap: wrap;
    min-width: 0;
}
.kmo-catalog-row__meta-sep { color: var(--kmo-text-faint); }
/* Varenummeret er det kunden søger efter i listen — det må ikke have
   samme vægt som fabrikant og variant-antal ved siden af. */
.kmo-catalog-row__no {
    font-size: 13px;
    font-weight: 600;
    color: var(--kmo-text);
    letter-spacing: 0.01em;
    -webkit-user-select: all;
    user-select: all;
}
.kmo-catalog-row__meta-text { font-family: var(--kmo-font-ui); }

/* Konfigurerbar vare. Maerket er en OPLYSNING om varen, ikke en status, saa
   det tager accentfarven og ikke lager-pillens groenne/roede skala. */
.kmo-catalog-row__meta-text--config {
  color: var(--kmo-accent, #1f6f5c);
  font-weight: 500;
}

/* Knappen navigerer frem for at laegge i kurven — den ser ud som Tilfoej,
   fordi den staar samme sted og har samme vaegt i raekken. */
.kmo-btn--config { text-decoration: none; }

.kmo-catalog-row__variants {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
}
.kmo-catalog-row__axis {
    display: flex; align-items: center; gap: 6px;
}
.kmo-catalog-row__axis-lbl {
    font-size: 11px;
    color: var(--kmo-text-muted);
    font-weight: 500;
}
.kmo-catalog-row__variants select {
    height: 30px;
    font-size: 12.5px;
    padding: 0 20px 0 6px;
    font-family: var(--kmo-font-mono);
    font-variant-numeric: tabular-nums;
    width: 80px;
    max-width: 80px;
    border: 1px solid var(--kmo-border-strong);
    border-radius: var(--kmo-radius);
    background: var(--kmo-surface);
}

/* Produktfamiliens størrelsesvælger (ADR 0006).
   Bredere end variant-vælgerne ved siden af, fordi den bærer en OPFORDRING
   ("Vælg størrelse") og ikke bare en værdi. De 80 px der er nok til "21,0 D"
   ville klippe opfordringen midt over, og det er netop den tekst der skal
   læses — feltet er tomt med vilje. */
.kmo-catalog-row__variants--family select[data-kmo-family-size] {
    width: 128px;
    max-width: 128px;
    font-family: var(--kmo-font-ui);
}
/* Ikke valgt endnu: feltet skal se ud som en handling der mangler, ikke som
   en tom værdi. Når der ER valgt, bliver det en almindelig værdi igen.
   Klassen sættes af wireFamily() og ikke af en :has()-selector — tilstanden
   skal kunne aflæses i DOM'en af en probe, og :has() på en <select>'s egne
   <option>'er er ikke noget man skal bygge en bestillingsflade på. */
.kmo-catalog-row__variants--family select.is-unset {
    color: var(--kmo-text-muted);
    border-color: var(--kmo-primary);
}

/* Familiens undertekst — "Fås i 39 størrelser (2,50–18,00 mm)". Dæmpet, i
   modsætning til Beskrivelse 2 ovenfor: den skiller ikke to varer fra
   hinanden, den beskriver spændet i vælgeren ved siden af. */
.kmo-catalog-row__qualifier--family {
    color: var(--kmo-text-muted);
    font-size: 12px;
}

/* "fra 385 kr" — familiens laveste pris, indtil kunden vælger en størrelse.
   "fra" står dæmpet foran tallet, så prisen læses som et spænd og ikke som
   rækkens endelige pris. */
.kmo-catalog-row__price--from .kmo-catalog-row__price-from-lbl {
    color: var(--kmo-text-muted);
    font-weight: 400;
}

.kmo-catalog-row__stock {
    display: flex; flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    white-space: nowrap;
}
.kmo-catalog-row__price {
    font-size: 13px;
    color: var(--kmo-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kmo-catalog-row__action {
    display: flex; align-items: center; gap: 6px;
    flex-shrink: 0;
    min-width: 0;
}
.kmo-catalog-row__action .kmo-btn {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Resultatlinjen over kataloglisten: antal + "Nulstil filtre". */
.kmo-catalog-resultbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; flex-wrap: wrap;
    margin: 0 0 10px;
    min-height: 24px;
}
.kmo-catalog-resultbar__count {
    font-size: 12.5px;
    color: var(--kmo-text-muted);
}

/* Aktive filtre som chips, over listen.
   Hver chip fjerner ÉT filter. De staar her og ikke i skinnen, fordi et filter
   kan gaelde uden at staa i skinnen: vaelger kunden et maerke og derefter en
   kategori hvor maerket ikke har varer, forsvinder maerket fra listen mens
   filteret bliver — og saa er chippen det eneste sted hun kan se det. */
.kmo-filter-chips {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 0 0 12px;
}
.kmo-filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 6px 3px 10px;
    border: 1px solid var(--kmo-border);
    border-radius: 999px;
    background: var(--kmo-surface);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--kmo-text);
    max-width: 100%;
}
.kmo-filter-chip__label {
    color: var(--kmo-text-muted);
}
.kmo-filter-chip__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 22ch;
}
/* Kryds-knappen: 22px er under de 24 anbefalede, men chippen selv er ikke
   klikbar, saa hele raekken ville ellers vaere en fjern-knap ved et fejlklik. */
.kmo-filter-chip__x {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px;
    flex: 0 0 auto;
    border: 0; border-radius: 999px;
    background: transparent;
    color: var(--kmo-text-muted);
    font-size: 15px; line-height: 1;
    cursor: pointer;
    padding: 0;
}
.kmo-filter-chip__x:hover,
.kmo-filter-chip__x:focus-visible {
    background: var(--kmo-error-soft, #fdeaea);
    color: var(--kmo-error, #b3261e);
}

/* Tom liste med en grund og en udvej. Uden handlingerne stod der kun "Ingen
   varer matcher filtrene", og den eneste vej videre var at rydde ALT. */
.kmo-catalog-empty {
    padding: 40px 20px;
    text-align: center;
    color: var(--kmo-text-muted);
}
.kmo-catalog-empty__msg {
    margin: 0 0 14px;
}
.kmo-catalog-empty__actions {
    display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}

/* Den raekke kunden kom tilbage fra. Markeringen er kort og daemper sig selv:
   den skal sige "her var du", ikke blive staaende som et valg. */
.kmo-catalog-row.is-genfundet {
    animation: kmo-genfundet 2s ease-out;
}
@keyframes kmo-genfundet {
    0%, 55% { background: var(--kmo-primary-soft, #eaecfb); }
    100%    { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    /* Ingen udtoning — men markeringen skal stadig kunne ses et oejeblik. */
    .kmo-catalog-row.is-genfundet {
        animation: none;
        background: var(--kmo-primary-soft, #eaecfb);
    }
}

/* Naar et maerkevalg ikke efterlader EN eneste klikbar kategori. Skinnen staar
   da med lutter nuller, og uden den her ligner den en fejl. */
.kmo-facet__note {
    font-size: 12px;
    line-height: 1.45;
    color: var(--kmo-text-muted);
    padding: 6px 0 2px;
}

/* Varenavnet som link i kurv, checkout, ordrer og kvittering.
   Diskret: linjen er ikke en handling, den er en genvej. Understregningen
   kommer foerst ved hover, saa en tabel med ti linjer ikke ser ud som et
   link-tapet. arver farve og vaegt fra <strong> omkring sig. */
.kmo-line-link {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.kmo-line-link:hover,
.kmo-line-link:focus-visible {
    color: var(--kmo-brand, #3346D6);
    border-bottom-color: currentColor;
}

/* Æskeprisen ved siden af stykprisen i kataloglisten: "54,00/stk · 324,00/æske".
   Samme linje her — kolonnen er højrestillet og smal, og en ekstra linje ville
   skubbe lager-pillen. Bryder den på smalle skærme, gør den det på separatoren. */
.kmo-catalog-row__price-pack {
    color: var(--kmo-text);
}

/* "Din aftalepris" — en MÆRKAT, ikke en sammenligning. Den siger at kundens
   aftale bliver brugt og påstår intet om niveauet; 5 af 28 aftalepriser er
   højere end listeprisen, så en "du sparer"-farve ville lyve på hver femte. */
.kmo-price-badge {
    display: inline-block;
    margin-top: 2px;
    padding: 1px 6px;
    border-radius: 3px;
    background: var(--kmo-surface-alt, rgba(0, 0, 0, .05));
    border: 1px solid var(--kmo-border, rgba(0, 0, 0, .12));
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: .01em;
    color: var(--kmo-text-muted);
    white-space: nowrap;
}

/* Udsalg (1.22.0). Normalprisen staar overstreget paa SIN EGEN linje over
   prisen: priskolonnen er hoejrestillet og smal, og aeskeprisen deler allerede
   linje med stykprisen — et tredje tal dér ville skubbe lager-pillen.

   Ingen roed farve. Roed er fejlfarven i portalen (--kmo-error), og en
   indkoebsportal til klinikker skal ikke ligne et Black Friday-banner. Pillen
   bruger accent-farven kataloget allerede bruger til andet. Tallet baerer
   betydningen, ikke kuloeren — og screen-reader-teksten i JS'en siger
   "Normalpris" og "Udsalgspris" hoejt, saa forskellen ikke kun er visuel. */
.kmo-catalog-row__price-was {
    display: block;
    font-size: 11.5px;
    color: var(--kmo-text-faint);
    text-decoration: line-through;
    white-space: nowrap;
}

.kmo-catalog-row__price--sale {
    color: var(--kmo-primary);
    font-weight: 600;
}

.kmo-catalog-row__sale-pill {
    display: inline-flex;
    margin-top: 3px;
    white-space: nowrap;
}

/* "Pris skjult" / "Pris på forespørgsel" — samme plads som en rigtig pris, men
   dæmpet og uden tal, så rækken ikke ser ud til at mangle noget. */
.kmo-catalog-row__price--muted {
    color: var(--kmo-text-muted);
    font-weight: 400;
    font-style: italic;
}

/* Stykantal pr. salgsenhed ved antalsfeltet: "à 6 stk". Står kun når
   serveren har et tal — 35 katalogvarer har en pakke-basisenhed uden
   udledelig størrelse, og de skal vise intet frem for et gæt. */
.kmo-catalog-row__qty-hint {
    font-size: 11.5px;
    color: var(--kmo-text-muted);
    white-space: nowrap;
}

/* Tidligere blev hele antalsvælgeren SKJULT under 1100px, med henvisning til
   at kunden kunne vælge antal på varesiden. Det betød at man på en almindelig
   bærbar ikke kunne bestille fra listen overhovedet — netop den skærmbredde
   klinikkerne sidder ved. Den wrapper nu i stedet ned under akse-vælgerne. */
@media (max-width: 1100px) {
    .kmo-catalog-row__variants {
        flex-wrap: wrap;
        row-gap: 6px;
    }
    .kmo-catalog-row__variants [data-kmo-qty] { flex: 0 0 auto; }
}

@media (max-width: 900px) {
    .kmo-catalog-row {
        grid-template-columns: 64px 1fr;
        grid-template-areas:
            "thumb main"
            "variants variants"
            "stock action";
        gap: 10px;
    }
    /* Why: miniaturen er 72 px bred og position: relative. I et spor der er
       smallere end det, flyder overskuddet ind over navnekolonnen — og fordi
       elementet er positioneret, males billedet OVEN PÅ varenavnet i stedet
       for under det. Lad den måle sig efter sporet frem for at holde fast i
       sin px-værdi, så et fremtidigt sporskift ikke kan genskabe fejlen. */
    .kmo-catalog-row__thumb {
        grid-area: thumb;
        width: 100%; height: auto;
        aspect-ratio: 1 / 1;
        align-self: start;
    }
    .kmo-catalog-row__main { grid-area: main; }
    .kmo-catalog-row__variants { grid-area: variants; }
    .kmo-catalog-row__stock { grid-area: stock; align-items: flex-start; flex-direction: row; gap: 12px; }
    .kmo-catalog-row__action { grid-area: action; justify-content: flex-end; }
}


/* ===== Qty stepper ===== */
.kmo-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--kmo-border-strong);
    border-radius: var(--kmo-radius);
    overflow: hidden;
    height: 34px;
    /* Why: stepperen er en fast kontrol. I flex-forældre (mobil-kurvens
     * <td> er display:flex med space-between) ville den ellers krympe, og
     * fordi overflow:hidden klipper, forsvandt mængde-tallet helt. flex-
     * shrink:0 holder hele stepperen i sin egen bredde uanset pladsmangel. */
    flex-shrink: 0;
}
.kmo-qty--sm { height: 30px; }
.kmo-qty button {
    width: 32px; height: 100%;
    border: none;
    background: transparent;
    color: var(--kmo-text-muted);
    cursor: pointer;
    font-size: 16px;
    font-family: inherit;
}
.kmo-qty--sm button { width: 24px; font-size: 14px; }
.kmo-qty button:hover { background: var(--kmo-surface-2); color: var(--kmo-text); }
.kmo-qty input {
    width: 56px; height: 100%;
    /* Why: box-sizing er border-box globalt (linje 70). UA-default min-width
     * (size-attributtens ~20 tegn) spiser ellers bredden og presser stepperen
     * bred. En eksplicit min-width neutraliserer den default; 3ch giver
     * samtidig et gulv på tre cifre, så mængde-tallet aldrig komprimeres væk
     * når stepperen sidder i en trang flex-celle (mobil-kurvens td). */
    min-width: 3ch;
    padding: 0 4px;
    border: none;
    text-align: center;
    font: inherit; font-size: 13.5px;
    font-variant-numeric: tabular-nums;
    background: transparent;
}
.kmo-qty--sm input { width: 48px; font-size: 12px; padding: 0 3px; }
.kmo-qty input:focus { outline: none; }
/* Skjul native number-spinner-pilene (WebKit/Blink + Firefox) så de
 * ikke ligger oven i vores egne −/+ knapper og gør stepperen smal +
 * skæv. Browseren respekterer stadig min/step/keyboard-pile. */
.kmo-qty input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.kmo-qty input[type="number"]::-webkit-outer-spin-button,
.kmo-qty input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}


/* ===== Product detail ===== */
.kmo-pd-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--kmo-gap-lg);
    align-items: flex-start;
    /* Grid-spor har min-width:auto som default, så et enkelt bredt barn
       (en lang CTA-label) ellers kan skubbe hele siden vandret. */
    min-width: 0;
}
.kmo-pd-grid > * { min-width: 0; }
@media (max-width: 900px) {
    .kmo-pd-grid { grid-template-columns: 1fr; }
    /* 1.6.0 — når kolonnerne stabler, skal købskortet ligge først. Uden det
       scroller man forbi billedboks, beskrivelse og hele specs-tabellen —
       omkring 550 px — før pris og "Læg i kurv" overhovedet dukker op. */
    .kmo-pd-buy { order: -1; }
}

/* 1.6.0 — 16/10 i stedet for 4/3, og flad flade i stedet for vignet. Ved 4/3
   fyldte en tom billedboks ~430 px af skærmen, og berigelsen dækker langtfra
   alle varer; et stort tomrum læser som ufærdigt frem for klinisk. */
.kmo-pd-media {
    background: var(--kmo-surface-2);
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius-lg);
    aspect-ratio: 16 / 10;
    display: grid; place-items: center;
    position: relative;
    overflow: hidden;
}
/* Med et billede i boksen skal fladen være hvid — produktfotos er skudt på hvidt. */
.kmo-pd-media:has(img:not([hidden])) { background: var(--kmo-surface); }
.kmo-pd-media__empty {
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    color: var(--kmo-text-faint); font-size: 12.5px;
}
/* display:flex ovenfor slår UA-stylesheetets [hidden], så "Intet
   produktbillede endnu" stod under HVERT produktfoto. */
.kmo-pd-media__empty[hidden] { display: none; }
.kmo-pd-media img { max-width: 100%; max-height: 100%; }
.kmo-pd-media__chip {
    position: absolute; top: 14px; left: 14px;
    font-family: var(--kmo-font-mono); font-size: 11px;
    background: rgba(255,255,255,0.9); color: var(--kmo-text-muted);
    padding: 3px 8px; border-radius: 3px;
}
.kmo-pd-thumbs { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
/* Familiebillede (name_pattern): billedet er ikke netop denne SKU. Ingen
   display-regel her, så [hidden] fra UA-stylesheetet stadig virker. */
.kmo-pd-media-note {
    margin: 8px 0 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--kmo-text-muted);
}
.kmo-pd-thumb {
    /* Miniaturen foelger hovedbilledets format — kmo-product.js saetter
       --kmo-thumb-ratio naar billedet er hentet. Uden den stod en hoej
       stol i en bred lille kasse med luft i siderne. */
    width: 64px; height: calc(64px / var(--kmo-thumb-ratio, 1.333));
    max-height: 84px;
    background: var(--kmo-surface-2);
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius);
    cursor: pointer;
    padding: 0;
    overflow: hidden;
}
.kmo-pd-thumb.is-active { border-color: var(--kmo-primary); }
.kmo-pd-thumb img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Lup-knap (1.3.0) — ligger i billedboksens hjørne, modsat kode-chippen. */
.kmo-pd-zoom {
    position: absolute; bottom: 10px; right: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; padding: 0;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius);
    color: var(--kmo-text-muted);
    cursor: zoom-in;
}
.kmo-pd-zoom:hover { color: var(--kmo-text); border-color: var(--kmo-primary); }

/* Fuldskærms-lup. Fast position over alt andet; body får overflow:hidden
   imens, så baggrunden ikke scroller under billedet. */
.kmo-lightbox {
    position: fixed; inset: 0; z-index: 99999;
    background: rgba(12,18,24,0.92);
    display: flex; align-items: center; justify-content: center;
    /* Browserens egen pinch-zoom ville kæmpe med vores; touch-action slår den
       fra inde i lup'en og lader vores egen håndtering stå alene. */
    touch-action: none;
    overscroll-behavior: contain;
}
.kmo-lightbox[hidden] { display: none; }
.kmo-lightbox__stage {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.kmo-lightbox__stage img {
    max-width: calc(92vw / var(--kmo-zoom)); max-height: calc(88vh / var(--kmo-zoom));
    /* Ingen transition på transform: den ville gøre træk og pinch gummiagtige. */
    transform-origin: center center;
    user-select: none; -webkit-user-drag: none;
    cursor: zoom-in;
}
/* Kontrollerne skal have en EGEN mørk flade, ikke bare gennemsigtigt hvidt.
   Produktfotos er typisk skudt på hvid baggrund, og zoomer man ind fylder den
   hele skærmen — hvidt-på-hvidt gjorde knapperne bogstavelig talt usynlige. */
.kmo-lightbox__close,
.kmo-lightbox__nav {
    position: absolute; z-index: 1;
    background: rgba(18,24,30,0.78);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: var(--kmo-radius);
    cursor: pointer;
    line-height: 1;
    box-shadow: 0 1px 6px rgba(0,0,0,0.35);
}
.kmo-lightbox__close { top: 16px; right: 16px; width: 40px; height: 40px; font-size: 24px; }
.kmo-lightbox__nav { top: 50%; transform: translateY(-50%); width: 44px; height: 64px; font-size: 32px; }
.kmo-lightbox__nav--prev { left: 16px; }
.kmo-lightbox__nav--next { right: 16px; }
.kmo-lightbox__close:hover,
.kmo-lightbox__nav:hover { background: rgba(18,24,30,0.94); border-color: rgba(255,255,255,0.6); }
/* Samme grund som knapperne: tælleren skal kunne læses oven på et hvidt foto. */
.kmo-lightbox__cap {
    position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%);
    padding: 4px 10px; border-radius: var(--kmo-radius);
    background: rgba(18,24,30,0.78);
    color: rgba(255,255,255,0.9);
    font-family: var(--kmo-font-mono); font-size: 12px;
    pointer-events: none;
}
.kmo-lightbox__cap:empty { display: none; }
.kmo-lightbox__spin {
    position: absolute; top: 18px; left: 18px;
    width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,0.25);
    border-top-color: #fff; border-radius: 50%;
    animation: kmo-lightbox-spin 0.7s linear infinite;
}
.kmo-lightbox__spin[hidden] { display: none; }
@keyframes kmo-lightbox-spin { to { transform: rotate(360deg); } }

@media (max-width: 600px) {
    .kmo-lightbox__nav { width: 38px; height: 52px; font-size: 26px; }
    .kmo-lightbox__nav--prev { left: 6px; }
    .kmo-lightbox__nav--next { right: 6px; }
}

.kmo-pd-mfr {
    font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--kmo-text-muted); font-weight: 600;
}
.kmo-pd-mfr[hidden] { display: none; }
/* Er nu <h1> (sidens eneste). Sæt størrelse og vægt eksplicit — temaets egen
   h1-regel ville ellers slå igennem med en overskriftsstørrelse. */
.kmo-pd-title { font-size: 22px; font-weight: 600; line-height: 1.3; margin: 4px 0 4px; letter-spacing: -0.01em; }
/* Brødkrumme-linjen der erstattede det duplikerede sidehoved. */
.kmo-pd-crumbs { margin-bottom: var(--kmo-gap-lg); font-size: 13px; }
.kmo-pd-crumbs a { color: var(--kmo-text-muted); }
.kmo-pd-crumbs a:hover { color: var(--kmo-primary); }
/* Akse-planen A4: kategoriens vej og indgrebene på varesiden. */
.kmo-pd-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.kmo-pd-path { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.kmo-pd-path__sep { color: var(--kmo-text-faint, var(--kmo-text-muted)); }
.kmo-pd-axes { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.kmo-pd-axis { display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; background: var(--kmo-primary-soft, var(--kmo-surface-2)); color: var(--kmo-primary); border: 1px solid var(--kmo-border); text-decoration: none; }
a.kmo-pd-axis:hover { border-color: var(--kmo-primary); }

/* Købskortet. Identitets-blokken sidder i kortets hoved, handlingen i kroppen. */
.kmo-pd-ident {
    padding: 20px 20px 18px;
    border-bottom: 1px solid var(--kmo-border);
}
.kmo-pd-buy__body {
    padding: 18px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: var(--kmo-gap);
}

/* Beskrivelse 2. Fuld tekstfarve: for 120 varer i kataloget er denne linje
   det eneste der skiller varen fra en anden med samme navn. */
.kmo-pd-qualifier {
    font-size: 14.5px;
    color: var(--kmo-text);
    margin: 0 0 12px;
    text-wrap: pretty;
}
.kmo-pd-qualifier[hidden] { display: none; }
.kmo-pd-single-use { margin: 0 0 12px; }
.kmo-pd-single-use[hidden] { display: none; }

.kmo-pd-ids { display: flex; flex-wrap: wrap; gap: 8px; }

.kmo-pd-no {
    display: inline-flex;
    align-items: baseline;
    gap: 7px;
    padding: 4px 10px;
    border: 1px solid var(--kmo-border-strong);
    border-radius: var(--kmo-radius-lg);
    background: var(--kmo-surface-2);
}
.kmo-pd-no[hidden] { display: none; }
/* Variant-SKU'en er sekundær i forhold til varenummeret — samme form, lavere stemme. */
.kmo-pd-no--variant { border-color: var(--kmo-border); background: var(--kmo-surface); }
.kmo-pd-no--variant .kmo-pd-no__label { color: var(--kmo-text-faint); }
.kmo-pd-no--variant .kmo-pd-no__value { font-size: 13px; font-weight: 500; color: var(--kmo-text-muted); }
.kmo-pd-no__label {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--kmo-text-muted);
}
.kmo-pd-no__value {
    font-family: var(--kmo-font-mono);
    font-size: 15px;
    font-weight: 600;
    color: var(--kmo-text);
    /* Ét klik markerer hele nummeret — kunden kopierer det til journal/BC. */
    -webkit-user-select: all;
    user-select: all;
}
.kmo-pd-price {
    font-size: 18px; font-weight: 500;
    margin: 14px 0 2px;
    font-variant-numeric: tabular-nums;
}
.kmo-pd-price small {
    font-size: 12px;
    color: var(--kmo-text-muted);
    font-weight: 400;
    margin-left: 6px;
}
/* Æskeprisen under stykprisen: "324,00 /æske". Egen linje frem for samme —
   to priser på samme række læses som ét beløb med en tastefejl i. */
.kmo-pd-price__pack {
    display: block;
    font-size: 15px;
    font-weight: 500;
    color: var(--kmo-text-muted);
    margin-top: 2px;
}
.kmo-pd-price-note {
    font-size: 12.5px;
    color: var(--kmo-text-muted);
    margin-bottom: 18px;
}

/* "Sælges i æsker à 6 stk" under antalsvælgeren på varekortet. Samme oplysning
   som kataloglistens qty-hint, samme dæmpede vægt. */
/* Ingen display: block her. Why: en author-regel med display slår UA-
   stylesheetets [hidden]-regel, og JS sætter hidden på noten for de varer der
   ikke har en pakkeregel — den tomme <small> fyldte så stadig en linje. */
.kmo-pd-pack-note {
    font-size: 12px;
    color: var(--kmo-text-muted);
}

.kmo-pd-spec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 24px;
    margin: 0;
}
.kmo-pd-spec-grid dt { color: var(--kmo-text-muted); font-size: 12.5px; padding: 6px 0; }
.kmo-pd-spec-grid dd { margin: 0; font-size: 13px; padding: 6px 0; font-variant-numeric: tabular-nums; font-family: var(--kmo-font-mono); }

/* Lagerstatus. Farverne er --kmo-success / --kmo-warning, som allerede fandtes
   i tokens men ikke var brugt her — status stod før i muted grå med samme vægt
   som prisnoten, selvom det er den vigtigste kendsgerning efter prisen. */
.kmo-pd-stock {
    display: inline-flex; align-self: flex-start;
    align-items: center; gap: 8px;
    padding: 6px 12px;
    border-radius: var(--kmo-radius);
    font-size: 13px;
    background: var(--kmo-surface-2);
    color: var(--kmo-text-muted);
}
.kmo-pd-stock__dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: currentColor; flex-shrink: 0;
}
.kmo-pd-stock strong { font-weight: 600; }
.kmo-pd-stock--ok    { background: var(--kmo-success-soft); color: #1a4d31; }
.kmo-pd-stock--ok .kmo-pd-stock__dot    { background: var(--kmo-success); }
.kmo-pd-stock--order { background: var(--kmo-warning-soft); color: #5a3b0d; }
.kmo-pd-stock--order .kmo-pd-stock__dot { background: var(--kmo-warning); }
.kmo-pd-stock--none  { background: var(--kmo-error-soft); color: #6f1f1f; }
.kmo-pd-stock--none .kmo-pd-stock__dot  { background: var(--kmo-error); }
/* Ukendt lager (BC svarede ikke): neutral, hverken loefte eller afslag. */
.kmo-pd-stock--unknown { background: var(--kmo-surface-2, #eef1f4); color: var(--kmo-text-muted, #4a5560); }
.kmo-pd-stock--unknown .kmo-pd-stock__dot { background: var(--kmo-text-muted, #8a96a3); }

/* Antal og CTA er to rækker, ikke én.

   Why: på én række med align-items: flex-end blev stepperen stillet op ad
   .kmo-field's underkant — og den kant tilhører pakke-noten UNDER stepperen,
   ikke stepperen selv. Stepperen stod derfor ~23 px højere end knappen ved
   siden af, på hver eneste vare med en pakkeregel. Lodret rækkefølge fjerner
   hele klassen af fejl: der er ingen fælles baseline at ramme forkert, og
   CTA-teksten ("Læg 1 æske (10 stk) i kurv · <klinik>") får fuld bredde i
   stedet for at konkurrere med antalsfeltet om pladsen. Gælder både desktop
   og telefon — intet ekstra breakpoint. */
.kmo-pd-action { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.kmo-pd-action .kmo-field { width: auto; }
/* Forespoerg prisaftale — sekundaer handling under "Laeg i kurv". */
.kmo-pd-agreement { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 12px; }
.kmo-pd-agreement small { font-size: 12px; }
/* 1.59.0 — prisaftale-boksens tre tilstande (ingen / aaben / aktiv). */
.kmo-pd-agreement__state { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; }
.kmo-pd-agreement__status { color: var(--kmo-text-muted, #5b6470); }
.kmo-pd-agreement__status--ok { color: var(--kmo-text, #1f2933); }
.kmo-pd-agreement__status--ok > span[aria-hidden] { color: var(--kmo-success, #2E7D4F); font-weight: 700; }
.kmo-pd-agreement__link,
.kmo-portal a.kmo-pd-agreement__link {
    background: none; border: 0; padding: 0; font: inherit; font-size: 13px;
    color: var(--kmo-primary, #1e3a5f); text-decoration: underline; cursor: pointer;
}
.kmo-modal .kmo-pa-intro__item { margin: 0 0 4px; }
/* Modal-praefiks: .kmo-portal p { margin: 0 } (0,1,1) vinder ellers over én klasse. */
.kmo-modal .kmo-pa-intro__text { margin: 0 0 16px; }
.kmo-pa-field { margin-bottom: 14px; }
.kmo-pa-qty-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.kmo-pa-qty { max-width: 140px; }
.kmo-pa-pieces { font-size: 13px; font-weight: 600; color: var(--kmo-text, #1f2933); }
.kmo-pa-help { display: block; margin-top: 6px; font-size: 12px; }
.kmo-modal .kmo-pa-terms { margin: 14px 0 0; font-size: 12.5px; }
.kmo-input.kmo-input--error { border-color: var(--kmo-error, #E53E3E); }
/* Pakkereglen står VED SIDEN AF stepperen: den er stepperens forklaring, og
   dér koster den ingen ekstra række. */
.kmo-pd-qty-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kmo-pd-add {
    width: 100%;
    height: 48px;
    font-size: 14px;
    font-weight: 600;
    /* Nowrap fra .kmo-btn ville stadig give knappen en min-bredde på hele
       labelen. Teksten må hellere ombryde end at skubbe siden vandret. */
    white-space: normal;
    min-width: 0;
}
.kmo-qty--lg { height: 44px; }
.kmo-qty--lg button { width: 38px; font-size: 17px; }
.kmo-qty--lg input { font-size: 15px; font-weight: 600; }

/* Brødtekst-kortet: BC's udvidede tekst, eller leverandørens. Ingen
   længdegrænse, så teksten får en læsbar spaltebredde. */
.kmo-pd-text { font-size: 13.5px; line-height: 1.65; max-width: 62ch; text-wrap: pretty; }
.kmo-pd-text p { margin: 0 0 10px; }
.kmo-pd-text p:last-child { margin-bottom: 0; }
.kmo-pd-text__note { font-size: 12px; color: var(--kmo-text-muted); }
.kmo-pd-text__list { margin: 0 0 10px; padding-left: 18px; }
.kmo-pd-text__list:last-child { margin-bottom: 0; }
.kmo-pd-text__list li { margin: 0 0 4px; }
.kmo-pd-text__list li:last-child { margin-bottom: 0; }
.kmo-pd-text-src {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em;
    font-weight: 600; color: var(--kmo-text-faint);
    flex-shrink: 0;
}
.kmo-pd-text-src--kmo { color: var(--kmo-text-muted); }
.kmo-pd-text-src[hidden] { display: none; }


.kmo-pd-supplier {
    display: inline-flex; align-items: center; gap: 4px;
    margin-top: 10px;
    font-size: 12.5px;
    color: var(--kmo-text-muted);
}
.kmo-pd-supplier[hidden] { display: none; }

.kmo-axis-grid {
    display: grid;
    gap: 12px;
}
/* Varer uden varianter får en tom akse-grid. Afstanden i købskortet styres nu
   af flex-gap'en, så et tomt element må ikke efterlade 32 px dødt luft mellem
   prisen og lagerstatus. */
.kmo-axis-grid:empty { display: none; }
.kmo-axis-grid--2 { grid-template-columns: 1fr 1fr; }
.kmo-axis-select {
    height: 40px;
    font-size: 14px;
    font-family: var(--kmo-font-mono);
    padding: 0 10px;
    border: 1px solid var(--kmo-border-strong);
    border-radius: var(--kmo-radius);
    background: var(--kmo-surface);
    color: var(--kmo-text);
}
.kmo-axis-select:focus {
    outline: none; border-color: var(--kmo-primary);
    box-shadow: 0 0 0 3px var(--kmo-primary-soft);
}


/* ============================================================
   Phase 3 — Multi-clinic cart
   ============================================================ */

.kmo-cart-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--kmo-gap-lg);
    align-items: flex-start;
}
@media (max-width: 900px) {
    .kmo-cart-grid { grid-template-columns: 1fr; }
}

.kmo-cart-grid aside .kmo-card { position: sticky; top: calc(var(--kmo-topbar-h) + 16px); }

/* Cart table scroll wrapper */
.kmo-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Prevent compact columns from wrapping */
.kmo-cart-grid .kmo-tbl th,
.kmo-cart-grid .kmo-tbl td { white-space: nowrap; }

/* Vare-kolonnen må gerne wrappe — den har plads. `break-word` (ikke `anywhere`)
 * bryder kun ved ordgrænser; `anywhere` brød midt i "Acrysof" når nabokolonnernes
 * nowrap stjal pladsen og kollapsede Vare-cellen til ~108px. min-width sikrer at
 * Vare aldrig presses smallere end en realistisk produkttitel. */
.kmo-cart-grid .kmo-tbl th:nth-child(1),
.kmo-cart-grid .kmo-tbl td:nth-child(1) {
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    min-width: 220px;
}

/* Variant-cellen skal også kunne ombrydes. Variantens akser ("Styrke +10,00 D
 * · Cylinder 0,75 D") og lagerpillen holdt den på ~300px, tabellen blev
 * bredere end kortet, og fjern-knappen i sidste kolonne lå skjult bag en
 * vandret scroll — målt ved 1600px 2026-10-05. */
.kmo-cart-grid .kmo-tbl td[data-label="Variant"],
.kmo-cart-grid .kmo-tbl td[data-label="Variant"] .kmo-pill {
    white-space: normal;
}
.kmo-cart-grid .kmo-tbl td[data-label="Variant"] { min-width: 140px; }

/* Cart-tabel skal aldrig stikke ud af kortet */
.kmo-cart-grid .kmo-tbl { table-layout: auto; }
.kmo-cart-grid .kmo-table-scroll { max-width: 100%; }


/* ============================================================
   Phase 4 — Checkout 3-step wizard
   ============================================================ */

.kmo-checkout-grid {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: var(--kmo-gap-lg);
    align-items: flex-start;
}
@media (max-width: 900px) {
    .kmo-checkout-grid { grid-template-columns: 1fr; }
}
.kmo-checkout__summary { position: sticky; top: calc(var(--kmo-topbar-h) + 16px); }

.kmo-steps {
    display: flex;
    gap: 0;
    margin-bottom: var(--kmo-gap-lg);
}
.kmo-step {
    flex: 1;
    padding: 10px 16px;
    background: var(--kmo-surface);
    border: 1px solid var(--kmo-border);
    border-right: none;
    font-size: 13px;
    display: flex; align-items: center; gap: 10px;
    color: var(--kmo-text-muted);
}
.kmo-step:first-child { border-radius: var(--kmo-radius) 0 0 var(--kmo-radius); }
.kmo-step:last-child  { border-radius: 0 var(--kmo-radius) var(--kmo-radius) 0; border-right: 1px solid var(--kmo-border); }
.kmo-step.is-active   { color: var(--kmo-text); background: var(--kmo-surface); border-color: var(--kmo-border-strong); }
.kmo-step.is-done     { color: var(--kmo-success); }
.kmo-step__num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--kmo-surface-2);
    color: var(--kmo-text-muted);
    font-size: 12px; font-weight: 600;
    display: grid; place-items: center;
    flex-shrink: 0;
}
.kmo-step.is-active .kmo-step__num { background: var(--kmo-primary); color: #fff; }
.kmo-step.is-done   .kmo-step__num { background: var(--kmo-success); color: #fff; }

.kmo-radio-card {
    display: flex; gap: 12px;
    padding: 14px;
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius);
    background: var(--kmo-surface);
    cursor: pointer;
    margin-bottom: 8px;
    align-items: flex-start;
}
.kmo-radio-card:hover { background: var(--kmo-surface-2); }
.kmo-radio-card.is-active { border-color: var(--kmo-primary); background: var(--kmo-primary-soft); }
.kmo-radio-card input { margin-top: 2px; accent-color: var(--kmo-primary); }


/* ============================================================
   Phase 5 — Returns wizard
   ============================================================ */

.kmo-returns-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--kmo-gap-lg);
    align-items: flex-start;
}
@media (max-width: 900px) {
    .kmo-returns-grid { grid-template-columns: 1fr; }
}

.kmo-scan-input { position: relative; }
.kmo-scan-input__icon {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
    color: var(--kmo-text-muted);
}

.kmo-returns-manual {
    margin-top: 14px;
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius);
    background: var(--kmo-surface-2);
}
.kmo-returns-manual > summary {
    padding: 10px 14px;
    cursor: pointer;
    font-weight: 500;
    color: var(--kmo-primary);
    list-style: none;
    user-select: none;
}
.kmo-returns-manual > summary::-webkit-details-marker { display: none; }
.kmo-returns-manual > summary::before {
    content: "▸";
    display: inline-block;
    width: 1em;
    transition: transform .15s;
}
.kmo-returns-manual[open] > summary::before { transform: rotate(90deg); }
.kmo-returns-manual__form {
    display: grid;
    grid-template-columns: 2fr 1fr 80px 1fr auto;
    gap: 12px;
    align-items: end;
    padding: 0 14px 14px;
}
@media (max-width: 900px) {
    .kmo-returns-manual__form { grid-template-columns: 1fr; }
}

.kmo-returns-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    padding: 14px 18px;
    background: var(--kmo-surface-2);
    border-radius: var(--kmo-radius);
    margin-top: 16px;
}
.kmo-returns-chip { display: flex; flex-direction: column; gap: 2px; }
.kmo-returns-chip__label {
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--kmo-text-muted); font-weight: 600;
}
.kmo-returns-chip__value {
    font-size: 18px; font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--kmo-text);
}


/* ============================================================
   Phase 6+ — Modal / drawer (used by clinic-admin invite)
   ============================================================ */

.kmo-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    display: grid;
    place-items: center;
    z-index: 100;
    padding: 24px;
}
/* display:grid ovenfor vinder over browserens [hidden] (UA-stylesheet) — uden
   denne regel stod prisaftale-modalen aaben paa varesiden fra foerste paint. */
.kmo-modal-backdrop[hidden] { display: none; }
.kmo-modal {
    background: var(--kmo-surface);
    border-radius: var(--kmo-radius-lg);
    box-shadow: var(--kmo-shadow-lg);
    width: 100%;
    max-width: 520px;
    overflow: hidden;
}
.kmo-modal__head {
    padding: 18px 20px;
    border-bottom: 1px solid var(--kmo-border);
    display: flex; align-items: center; justify-content: space-between;
}
.kmo-modal__head h2 { font-size: 16px; margin: 0; }
.kmo-modal__body { padding: 20px; }
.kmo-modal__foot {
    padding: 14px 20px;
    border-top: 1px solid var(--kmo-border);
    display: flex; justify-content: flex-end; gap: 8px;
    background: var(--kmo-surface-2);
}


/* ============================================================
   Phase 7 — Account tabs
   ============================================================ */

.kmo-account-grid {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--kmo-gap-lg);
    align-items: flex-start;
}
@media (max-width: 900px) {
    .kmo-account-grid { grid-template-columns: 1fr; }
}
.kmo-account-nav { display: flex; flex-direction: column; gap: 2px; }
.kmo-account-nav__item {
    padding: 8px 12px;
    border-radius: var(--kmo-radius);
    font-size: 13.5px;
    color: var(--kmo-text-muted);
    cursor: pointer;
    border: 1px solid transparent;
    background: transparent;
    text-align: left;
    font: inherit;
}
.kmo-account-nav__item:hover { background: var(--kmo-surface-2); color: var(--kmo-text); }
.kmo-account-nav__item.is-active {
    background: var(--kmo-primary-soft);
    color: var(--kmo-primary);
    font-weight: 500;
}


/* ============================================================
   Phase 8 — Dashboard stats + shortcuts
   ============================================================ */

.kmo-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--kmo-gap);
}
.kmo-stat {
    background: var(--kmo-surface);
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius-lg);
    padding: 16px 18px;
    display: flex; flex-direction: column; gap: 4px;
}
.kmo-stat__label {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--kmo-text-muted); font-weight: 600;
}
.kmo-stat__value {
    font-size: 24px; font-weight: 600;
    color: var(--kmo-text);
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
}
.kmo-stat__hint {
    font-size: 12px;
    color: var(--kmo-text-muted);
    display: flex; align-items: center; gap: 6px;
    margin-top: 4px;
}

.kmo-shortcut {
    display: flex; flex-direction: column; gap: 8px;
    padding: 14px 12px;
    background: var(--kmo-surface-2);
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius);
    color: var(--kmo-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}
.kmo-shortcut:hover { border-color: var(--kmo-primary); color: var(--kmo-primary); text-decoration: none; }

/* ---- Dashboard: nyheds/produkt-bånd -------------------------------------
   To lige brede felter under nøgletallene. Når kun det ene har indhold
   (ingen nyhed, eller ingen fremhævet vare valgt) fylder det hele bredden
   via --single, så der ikke står en tom ramme tilbage. */
.kmo-highlights {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--kmo-gap);
    margin-top: var(--kmo-gap);
}
.kmo-highlights--single { grid-template-columns: 1fr; }

.kmo-highlight {
    background: var(--kmo-surface);
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius-lg);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.kmo-highlight__eyebrow {
    font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--kmo-text-muted); font-weight: 600;
}
.kmo-highlight__title {
    font-size: 15px; font-weight: 600; color: var(--kmo-text);
    margin: 0; line-height: 1.35;
}
.kmo-highlight__body {
    font-size: 13px; color: var(--kmo-text-muted); margin: 0; line-height: 1.5;
}
.kmo-highlight__meta { font-size: 12px; color: var(--kmo-text-faint); }
.kmo-highlight__cta {
    font-size: 13px; font-weight: 500; color: var(--kmo-primary);
    text-decoration: none; margin-top: auto; padding-top: 4px;
}
.kmo-highlight__cta:hover { text-decoration: underline; }

/* Nyheds-varianten farvelægges af notice-kind, samme skala som kmo-pill. */
.kmo-highlight--news { border-left: 3px solid var(--kmo-primary); }
/* Med fremhævet billede lægger nyheden sig som produkt-kortet: billede til
   venstre, tekst højre. Uden billede beholder den den rene tekst-kolonne. */
.kmo-highlight--news.kmo-highlight--has-img {
    flex-direction: row;
    align-items: flex-start;
    gap: 14px;
}
.kmo-highlight__news-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; flex: 1; }
.kmo-highlight__news-img {
    width: 88px; height: 88px;
    object-fit: cover;
    border-radius: var(--kmo-radius);
    background: var(--kmo-surface-2);
    flex-shrink: 0;
}
.kmo-highlight--warn { border-left-color: var(--kmo-warning); }
.kmo-highlight--ok   { border-left-color: var(--kmo-success); }

/* Produkt-varianten er ét stort klik-mål — billede til venstre, tekst højre. */
.kmo-highlight--product {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    color: inherit;
}
.kmo-highlight--product:hover {
    border-color: var(--kmo-primary);
    text-decoration: none;
}

/* Nyheden er ét klik-mål når beskeden har et link. CTA'en er da et <span>,
   så understregningen skal drives af kortets egen hover/fokus. */
.kmo-highlight--linked { text-decoration: none; color: inherit; cursor: pointer; }
.kmo-highlight--linked:hover { border-color: var(--kmo-primary); text-decoration: none; }
.kmo-highlight--linked:hover .kmo-highlight__cta,
.kmo-highlight--linked:focus-visible .kmo-highlight__cta { text-decoration: underline; }
.kmo-highlight--linked:focus-visible {
    outline: 2px solid var(--kmo-primary);
    outline-offset: 2px;
}
.kmo-highlight__img {
    width: 72px; height: 72px;
    object-fit: contain;
    border-radius: var(--kmo-radius);
    background: var(--kmo-surface-2);
    flex-shrink: 0;
}
.kmo-highlight__prod-body {
    display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.kmo-highlight__prod-body .kmo-highlight__title {
    overflow-wrap: anywhere;
}

@media (max-width: 720px) {
    .kmo-highlights { grid-template-columns: 1fr; }
}


/* ============================================================
   Backwards-compat shims for v0.4 class names.
   These will be removed in Phase 2 once blocks are migrated.
   ============================================================ */

/* legacy --kmo-accent (was orange) now mirrors primary */
.kmo-product-card__add,
.kmo-cart__checkout,
.kmo-checkout__submit,
.kmo-returns__finalize.button {
    background: var(--kmo-primary);
    color: #fff;
    border: none;
}
.kmo-product-card__add:hover,
.kmo-cart__checkout:hover,
.kmo-checkout__submit:hover,
.kmo-returns__finalize.button:hover:not(:disabled) {
    background: var(--kmo-primary-hover);
}

/* ============================================================
   Fase 10 — Auth (login / signup / 2FA setup)
   Two-pane layout: __left = form + brand mark, __right = promo
   ============================================================ */
.kmo-auth {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    background: var(--kmo-surface);
}
.kmo-auth__left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 8vw;
    background: var(--kmo-surface);
    min-width: 0;
}
.kmo-auth__right {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 32px;
    padding: 56px 6vw;
    background: linear-gradient(135deg, var(--kmo-primary) 0%, var(--kmo-primary-hover) 100%);
    color: #fff;
    min-width: 0;
}
.kmo-auth__brand {
    margin-bottom: 40px;
    font-size: 18px;
    font-weight: 600;
    color: var(--kmo-text);
}
.kmo-auth__logo {
    max-height: 48px;
    width: auto;
    display: block;
}
.kmo-auth__form {
    max-width: 420px;
    width: 100%;
}
.kmo-auth__title {
    font-size: 28px;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--kmo-text);
    letter-spacing: -0.01em;
}
.kmo-auth__lede {
    color: var(--kmo-text-muted);
    margin: 0 0 28px;
    font-size: 14.5px;
}
.kmo-auth__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 18px;
}
.kmo-auth__field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--kmo-text);
}
.kmo-auth__field input[type="text"],
.kmo-auth__field input[type="email"],
.kmo-auth__field input[type="password"] {
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius);
    background: var(--kmo-surface);
    color: var(--kmo-text);
    font-size: 14px;
    font-family: var(--kmo-font);
    transition: border-color .15s, box-shadow .15s;
}
.kmo-auth__field input:focus {
    outline: none;
    border-color: var(--kmo-primary);
    box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}
.kmo-auth__field input[readonly] {
    background: var(--kmo-surface-2);
    color: var(--kmo-text-muted);
    cursor: not-allowed;
}
.kmo-auth__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin: 4px 0 24px;
    font-size: 13.5px;
    color: var(--kmo-text-muted);
}
.kmo-auth__row label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.kmo-auth__row a {
    color: var(--kmo-primary);
    text-decoration: none;
}
.kmo-auth__row a:hover { text-decoration: underline; }
.kmo-auth__submit {
    width: 100%;
    height: 44px;
    border: none;
    border-radius: var(--kmo-radius);
    background: var(--kmo-primary);
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    font-family: var(--kmo-font);
}
.kmo-auth__submit:hover { background: var(--kmo-primary-hover); }
.kmo-auth__submit:disabled { opacity: .5; cursor: not-allowed; }
.kmo-auth__footer {
    color: var(--kmo-text-muted);
    font-size: 12.5px;
    margin-top: 32px;
}
footer.kmo-auth__footer {
    /* bottom-of-pane copyright */
    margin-top: auto;
    padding-top: 32px;
}
.kmo-auth__quote {
    font-size: 22px;
    line-height: 1.4;
    font-weight: 500;
    max-width: 460px;
    letter-spacing: -0.01em;
}
.kmo-auth__points {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 460px;
}
.kmo-auth__point {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 14px;
    align-items: start;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255,255,255,.92);
}
.kmo-auth__point strong {
    display: block;
    color: #fff;
    font-weight: 600;
    margin-bottom: 2px;
}
.kmo-auth__point-mark {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(255,255,255,.18);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

/* Mobile: stack the two panes, promo first then form */
@media (max-width: 900px) {
    .kmo-auth {
        grid-template-columns: 1fr;
        min-height: auto;
    }
    .kmo-auth__right {
        order: -1;
        padding: 40px 24px;
        gap: 24px;
    }
    .kmo-auth__left { padding: 40px 24px; }
    .kmo-auth__quote { font-size: 18px; }
    .kmo-auth__title { font-size: 24px; }
}

/* ============================================================
   v0.8.1 — Help / info system
   Tooltips, slide-over help panel, getting-started card,
   validation-flag highlight (cart lines).
   ============================================================ */

/* ===== Tooltip-knap + flyder ===== */
.kmo-tip {
    display: inline-grid;
    place-items: center;
    width: 16px;
    height: 16px;
    margin-left: 6px;
    padding: 0;
    border: 1px solid var(--kmo-border-strong);
    border-radius: 50%;
    background: var(--kmo-surface);
    color: var(--kmo-text-muted);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    vertical-align: middle;
    transition: color .15s, border-color .15s, background .15s;
}
.kmo-tip:hover,
.kmo-tip:focus-visible,
.kmo-tip[aria-expanded="true"] {
    color: var(--kmo-primary);
    border-color: var(--kmo-primary);
    background: var(--kmo-primary-soft);
    outline: none;
}

.kmo-tip-floater {
    position: fixed;
    z-index: 9999;
    max-width: 280px;
    padding: 10px 12px;
    border-radius: var(--kmo-radius-lg);
    background: var(--kmo-text);
    color: #fff;
    font-size: 12.5px;
    line-height: 1.45;
    box-shadow: var(--kmo-shadow-lg);
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity .12s, transform .12s;
}
.kmo-tip-floater[data-visible="1"] {
    opacity: 1;
    transform: translateY(0);
}
.kmo-tip-floater::after {
    content: "";
    position: absolute;
    left: var(--kmo-tip-arrow-x, 50%);
    width: 8px;
    height: 8px;
    background: inherit;
    transform: translateX(-50%) rotate(45deg);
}
.kmo-tip-floater[data-placement="top"]::after {
    bottom: -4px;
}
.kmo-tip-floater[data-placement="bottom"]::after {
    top: -4px;
}

/* ===== Hjælpe-panel (topbar "?"-knap) ===== */
.kmo-topbar__help-btn {
    display: inline-grid;
    place-items: center;
    width: 32px;
    height: 32px;
    /* Why: samme flex-shrink-lås som .kmo-topbar__icon-btn — ellers klemmes
     * "?"-cirklen til en oval i en trang topbar. */
    flex: 0 0 auto;
    margin-right: 4px;
    padding: 0;
    border: 1px solid var(--kmo-border);
    border-radius: 50%;
    background: var(--kmo-surface);
    color: var(--kmo-text-muted);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: color .15s, border-color .15s, background .15s;
}
.kmo-topbar__help-btn:hover,
.kmo-topbar__help-btn:focus-visible,
.kmo-topbar__help-btn[aria-expanded="true"] {
    color: var(--kmo-primary);
    border-color: var(--kmo-primary);
    background: var(--kmo-primary-soft);
    outline: none;
}

.kmo-help-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9990;
    background: rgba(15, 23, 42, .35);
    opacity: 0;
    transition: opacity .18s ease-out;
}
.kmo-help-backdrop[data-visible="1"] {
    opacity: 1;
}

/* Why: kmo-help.js appender panel/backdrop/modal til document.body — altså
 * UDEN FOR .kmo-portal. Hverken box-sizing-reset'et (linje 72) eller portalens
 * typografi rammer dem derfor, og temaets egne button-/svg-regler vinder i
 * stedet. Vi sætter begge dele eksplicit her, så hjælpen ser ens ud uanset
 * hvilket tema siden kører. */
.kmo-help-panel,
.kmo-help-backdrop,
.kmo-help-modal,
.kmo-help-modal-backdrop,
.kmo-help-panel *,
.kmo-help-modal * {
    box-sizing: border-box;
}
.kmo-help-panel,
.kmo-help-modal {
    font-family: var(--kmo-font-ui);
    font-size: 14px;
    line-height: 1.5;
    color: var(--kmo-text);
}

.kmo-help-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9991;
    width: min(400px, 92vw);
    background: var(--kmo-surface);
    box-shadow: var(--kmo-shadow-lg);
    transform: translateX(100%);
    transition: transform .22s ease-out;
    display: flex;
    flex-direction: column;
}
.kmo-help-panel[data-visible="1"] {
    transform: translateX(0);
}
.kmo-help-panel__head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--kmo-border);
}
.kmo-help-panel__title {
    font-size: 15px;
    font-weight: 600;
    flex: 1;
    margin: 0;
}
.kmo-help-panel__close {
    /* Why: browserens button-default er padding 1px 6px. Uden nulstilling blev
     * indholdsboksen præcis 16px bred — nøjagtig SVG'ens bredde — så enhver
     * tema-regel på button-padding/font/line-height skubbede eller klippede
     * krydset. appearance + line-height låser resten af de native styles. */
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    padding: 0;
    margin: 0;
    -webkit-appearance: none;
    appearance: none;
    font: inherit;
    line-height: 1;
    display: grid;
    place-items: center;
    border: none;
    background: transparent;
    color: var(--kmo-text-muted);
    cursor: pointer;
    border-radius: var(--kmo-radius);
}
.kmo-help-panel__close svg {
    display: block;
}
.kmo-help-panel__close:hover {
    background: var(--kmo-surface-2);
    color: var(--kmo-text);
}
.kmo-help-panel__body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}
.kmo-help-panel__foot {
    border-top: 1px solid var(--kmo-border);
    padding: 14px 18px;
    background: var(--kmo-surface-2);
    font-size: 12.5px;
}
.kmo-help-panel__foot strong {
    display: block;
    margin-bottom: 4px;
    color: var(--kmo-text);
}
.kmo-help-panel__foot a {
    display: inline-block;
    margin-right: 12px;
}
.kmo-help-panel__send-link {
    color: var(--kmo-accent);
    cursor: pointer;
    text-decoration: underline;
}

/* ===== Help: send-besked-modal (0.10.2) ===== */
.kmo-help-modal-backdrop {
    position: fixed; inset: 0; z-index: 10000;
    background: rgba(0, 0, 0, 0.4); opacity: 0;
    transition: opacity 180ms ease;
}
.kmo-help-modal-backdrop[data-visible="1"] { opacity: 1; }
.kmo-help-modal {
    position: fixed; z-index: 10001;
    top: 50%; left: 50%; transform: translate(-50%, -45%) scale(0.98);
    width: min(520px, 92vw);
    background: var(--kmo-surface);
    border-radius: var(--kmo-radius-lg);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
    opacity: 0;
    transition: opacity 180ms ease, transform 180ms ease;
}
.kmo-help-modal[data-visible="1"] {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.kmo-help-modal__head {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 18px; border-bottom: 1px solid var(--kmo-border);
}
.kmo-help-modal__title { margin: 0; font-size: 16px; }
.kmo-help-modal__close {
    background: transparent; border: none; cursor: pointer;
    flex: 0 0 auto; width: 28px; height: 28px; padding: 0; margin: 0;
    -webkit-appearance: none; appearance: none; font: inherit; line-height: 1;
    display: grid; place-items: center;
    color: var(--kmo-text-muted); border-radius: 4px;
}
.kmo-help-modal__close svg {
    display: block;
}
.kmo-help-modal__close:hover { background: var(--kmo-surface-2); }
.kmo-help-modal__body {
    padding: 14px 18px;
}
.kmo-help-modal__textarea {
    width: 100%; box-sizing: border-box;
    padding: 10px 12px; border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius); font-family: inherit; font-size: 14px;
    resize: vertical; min-height: 120px;
}
.kmo-help-modal__textarea:focus {
    outline: none; border-color: var(--kmo-accent);
    box-shadow: 0 0 0 3px rgba(11, 87, 208, 0.12);
}
.kmo-help-modal__feedback {
    margin: 8px 0 0; min-height: 1.2em; font-size: 13px; color: var(--kmo-text-muted);
}
.kmo-help-modal__feedback--ok    { color: var(--kmo-success, #0a7c2f); }
.kmo-help-modal__feedback--error { color: var(--kmo-danger,  #b91c1c); }
.kmo-help-modal__foot {
    display: flex; justify-content: flex-end; gap: 8px;
    padding: 12px 18px; border-top: 1px solid var(--kmo-border);
    background: var(--kmo-surface-2);
    border-bottom-left-radius: var(--kmo-radius-lg);
    border-bottom-right-radius: var(--kmo-radius-lg);
}

/* 1.58.0 — "Giv feedback" i topbaren (testperioden). */
.kmo-topbar__feedback-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    height: 32px;
    margin-right: 8px;
    padding: 0 12px;
    border: 1px solid var(--kmo-primary);
    border-radius: 999px;
    background: var(--kmo-primary-soft);
    color: var(--kmo-primary);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.kmo-topbar__feedback-btn:hover,
.kmo-topbar__feedback-btn:focus-visible,
.kmo-topbar__feedback-btn[aria-expanded="true"] {
    background: var(--kmo-primary);
    color: #fff;
    outline: none;
}
.kmo-topbar__feedback-btn svg { display: block; flex: 0 0 auto; }
.kmo-feedback-cats {
    display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 10px;
}
.kmo-feedback-cat {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
@media (max-width: 640px) {
    .kmo-topbar__feedback-btn { width: 36px; height: 36px; padding: 0; justify-content: center; }
    .kmo-topbar__feedback-label { display: none; }
}

.kmo-help-article {
    border-bottom: 1px solid var(--kmo-border);
}
.kmo-help-article:last-child {
    border-bottom: none;
}
.kmo-help-article__head {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 18px;
    border: none;
    background: transparent;
    text-align: left;
    cursor: pointer;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--kmo-text);
}
.kmo-help-article__head:hover {
    background: var(--kmo-surface-2);
}
.kmo-help-article__chev {
    margin-left: auto;
    color: var(--kmo-text-muted);
    transition: transform .15s;
}
.kmo-help-article[data-open="1"] .kmo-help-article__chev {
    transform: rotate(90deg);
}
.kmo-help-article__body {
    display: none;
    padding: 0 18px 16px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--kmo-text);
}
.kmo-help-article[data-open="1"] .kmo-help-article__body {
    display: block;
}
.kmo-help-article__body p { margin: 0 0 10px; }
.kmo-help-article__body p:last-child { margin-bottom: 0; }
.kmo-help-article__body h3 {
    font-size: 13.5px;
    margin: 12px 0 6px;
}
.kmo-help-article__body ul,
.kmo-help-article__body ol {
    margin: 0 0 10px;
    padding-left: 22px;
}
.kmo-help-article__body li { margin-bottom: 4px; }
.kmo-help-article__pin {
    font-size: 10.5px;
    text-transform: uppercase;
    color: var(--kmo-primary);
    font-weight: 700;
    letter-spacing: .04em;
    margin-right: 6px;
}
.kmo-help-panel__empty {
    padding: 32px 18px;
    text-align: center;
    color: var(--kmo-text-muted);
    font-size: 13px;
}

/* ===== Dashboard layout =====
 * Flyttet hertil fra inline style="…" på dashboard-render.php så CSS kan
 * override layoutet ved <600px (inline styles vinder ellers uden !important). */
.kmo-dashboard__main {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--kmo-gap-lg);
    align-items: flex-start;
    margin-top: var(--kmo-gap-lg);
}
.kmo-dashboard__shortcuts {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* ===== "Kom godt i gang"-kort på dashboard ===== */
.kmo-getting-started-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    margin-bottom: var(--kmo-gap-lg);
    border: 1px solid var(--kmo-border);
    border-left: 4px solid var(--kmo-primary);
    border-radius: var(--kmo-radius-lg);
    background: var(--kmo-primary-soft);
}
.kmo-getting-started-card__icon {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--kmo-primary);
    color: #fff;
    font-weight: 700;
    font-size: 16px;
}
.kmo-getting-started-card__body {
    flex: 1;
    font-size: 13px;
    line-height: 1.45;
}
.kmo-getting-started-card__body strong {
    display: block;
    color: var(--kmo-text);
    font-size: 14px;
    margin-bottom: 2px;
}
.kmo-getting-started-card__body span {
    color: var(--kmo-text-muted);
}

/* ===== Ordre-detalje drawer ===== */
.kmo-order-drawer {
    display: none;
    position: fixed; inset: 0; z-index: 9000;
}
.kmo-order-drawer.is-open { display: flex; }
.kmo-order-drawer__backdrop {
    flex: 1;
    background: rgba(0,0,0,.35);
}
.kmo-order-drawer__panel {
    width: min(760px, 96vw);
    height: 100%;
    background: var(--kmo-surface);
    box-shadow: -4px 0 24px rgba(0,0,0,.15);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.kmo-order-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid var(--kmo-border);
    flex: 0 0 auto;
}
.kmo-order-drawer__title { margin: 0; font-size: 17px; font-weight: 600; }
.kmo-order-drawer__body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

/* Hero: status + total + nøgletal i ét overskueligt kort */
.kmo-order-drawer__hero {
    background: var(--kmo-surface-2);
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius-lg);
    padding: 18px 20px;
    margin-bottom: 20px;
}
.kmo-order-drawer__hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 14px;
}
.kmo-order-drawer__hero-status { display: flex; flex-direction: column; gap: 6px; }
.kmo-order-drawer__hero-status-label {
    color: var(--kmo-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.kmo-order-drawer__hero-total { text-align: right; }
.kmo-order-drawer__hero-total-label {
    color: var(--kmo-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 4px;
}
.kmo-order-drawer__hero-total-value {
    font-size: 22px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.kmo-order-drawer__hero-total-currency {
    color: var(--kmo-text-muted);
    font-size: 13px;
    font-weight: 500;
    margin-left: 4px;
}
.kmo-order-drawer__hero-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px 20px;
    border-top: 1px solid var(--kmo-border);
    padding-top: 14px;
    font-size: 13px;
}
.kmo-order-drawer__hero-meta > div { display: flex; flex-direction: column; gap: 3px; }
.kmo-order-drawer__hero-meta-label {
    color: var(--kmo-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.kmo-order-drawer__hero-meta-value { font-weight: 500; }

.kmo-order-drawer__timeline {
    margin-bottom: 20px;
    padding: 14px 18px;
    background: var(--kmo-surface);
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius-lg);
}


.kmo-order-drawer__section-title {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--kmo-text-muted);
    margin: 0 0 12px 2px;
}

.kmo-order-drawer__address {
    background: var(--kmo-surface);
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius-lg);
    padding: 14px 18px;
    margin-bottom: 20px;
    font-size: 13.5px;
    line-height: 1.55;
}
.kmo-order-drawer__address-label {
    color: var(--kmo-text-muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-bottom: 6px;
}
.kmo-order-drawer__addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 20px;
}
.kmo-order-drawer__addresses .kmo-order-drawer__address {
    margin-bottom: 0;
}
.kmo-order-drawer__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}
.kmo-order-drawer__discount {
    color: var(--kmo-success);
    font-weight: 600;
}

/* Linked-sektioner: forsendelser/fakturaer der hører til ordren */
.kmo-order-drawer__linked {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}
.kmo-order-drawer__linked-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    background: var(--kmo-surface);
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius-lg);
    font-size: 13.5px;
}
.kmo-order-drawer__linked-main {
    flex: 1;
    min-width: 0;
}
.kmo-order-drawer__linked-sub {
    color: var(--kmo-text-muted);
    font-size: 12.5px;
    margin-top: 2px;
}
.kmo-order-drawer__linked-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    text-align: right;
    white-space: nowrap;
}
.kmo-order-drawer__linked-amount {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.kmo-order-drawer__linked-action { flex: 0 0 auto; }
@media (max-width: 600px) {
    .kmo-order-drawer__addresses { grid-template-columns: 1fr; }
}

/* Ordre-/fakturalinje som kort i stedet for trang tabel */
.kmo-order-drawer__lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 18px;
}
.kmo-order-drawer__line {
    background: var(--kmo-surface);
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius-lg);
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.kmo-order-drawer__line-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}
.kmo-order-drawer__line-title-block { min-width: 0; flex: 1; }
.kmo-order-drawer__line-title {
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    word-break: break-word;
}
.kmo-order-drawer__line-sub {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 10px;
    color: var(--kmo-text-muted);
    font-size: 12.5px;
}
.kmo-order-drawer__line-sub .mono {
    font-family: var(--kmo-font-mono);
    font-size: 12px;
}
.kmo-order-drawer__line-sub-sep {
    color: var(--kmo-border-strong);
}
.kmo-order-drawer__line-total {
    font-size: 15px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.kmo-order-drawer__line-pi {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    padding: 8px 10px;
    background: var(--kmo-surface-2);
    border-radius: var(--kmo-radius);
    font-size: 12.5px;
}
.kmo-order-drawer__line-pi-label {
    color: var(--kmo-text-muted);
    text-transform: uppercase;
    letter-spacing: .04em;
    font-size: 10.5px;
    margin-right: 4px;
}
.kmo-order-drawer__line-foot {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--kmo-border);
    font-size: 12.5px;
    color: var(--kmo-text-muted);
}
.kmo-order-drawer__line-qty { font-weight: 500; color: var(--kmo-text); }
.kmo-order-drawer__line-unitprice { font-variant-numeric: tabular-nums; }

.kmo-order-drawer__summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: var(--kmo-surface-2);
    border-radius: var(--kmo-radius-lg);
    font-weight: 600;
}
.kmo-order-drawer__summary-total {
    font-size: 18px;
    font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
    .kmo-order-drawer__body { padding: 18px; }
    .kmo-order-drawer__hero { padding: 16px; }
    .kmo-order-drawer__hero-total-value { font-size: 19px; }
    .kmo-order-drawer__line-head { flex-direction: column; gap: 6px; }
    .kmo-order-drawer__line-total { align-self: flex-start; }
}

/* Clickable table rows */
.kmo-tbl--clickable tbody tr:hover { background: var(--kmo-surface-2); }

/* ===== Flagged cart-lines (valideringsfejl) ===== */
.kmo-cart-line--flagged,
tr.is-flagged,
tr[data-cart-iol-row].is-flagged {
    outline: 2px solid var(--kmo-error);
    outline-offset: -2px;
    background: var(--kmo-error-soft) !important;
    animation: kmo-flag-pulse 1.2s ease-out 2;
}
@keyframes kmo-flag-pulse {
    0%, 100% { outline-color: transparent; }
    50%      { outline-color: var(--kmo-error); }
}
/* ============================================================
   Mobil-revision (≤600px) — samlede side-niveau tilpasninger.
   Eksisterende @media (max-width: 900px) blokke fortsætter deres rolle
   som "tablet"-breakpoint; denne blok finjusterer ned til ~360px telefon.
   ============================================================ */
@media (max-width: 600px) {

    /* Shop-context-bar (klinik-switcher): hver klinik på egen række.
     *
     * `flex-wrap: nowrap` ER rettelsen, og grunden er ikke oplagt:
     * `flex-direction: column` sammen med `flex-wrap: wrap` og et
     * `max-height` får flex til at wrappe i en ny KOLONNE når højden er brugt
     * — og `overflow-x: hidden` på baren klipper den kolonne bort. De øvrige
     * afdelinger var altså ikke under kanten; de lå til HØJRE, uden for
     * feltet, uden nogen måde at nå dem på.
     *
     * Målt 2026-09-18 ved 390 px: af Memiras fire afdelinger kunne kun to
     * vælges. Den samme måling fandt tidligere `.kmo-shop-ctx__track` med
     * `right=733` på en viewport på 390 — det var netop den klippede kolonne.
     *
     * Gruppen (én pr. kunde, når brugeren har flere) har sin egen
     * `flex-wrap: wrap` og ingen `flex-direction`, altså `row`. Den skal
     * stables med, ellers ligger afdelingerne to-og-to vandret indeni. */
    .kmo-shop-ctx { flex-direction: column; flex-wrap: nowrap; }
    .kmo-shop-ctx__group { flex-direction: column; flex-wrap: nowrap; }
    .kmo-shop-ctx__track { flex-basis: 100%; width: 100%; }

    /* Loftet er "cirka to rækker" — men det tal stammer fra desktop, hvor
     * baren wrapper vandret og to rækker er mange afdelinger. Her er hver
     * afdeling ÉN række, så 152px er to afdelinger. En region med 24 må
     * stadig ikke fylde hele skærmen, så loftet bliver stående — det bliver
     * bare højt nok til at listen ligner en liste. */
    .kmo-shop-ctx { max-height: 42vh; }

    /* Og så skal det KUNNE ses at der er mere. En scrollbar i et lille felt
     * er usynlig på en telefon indtil man rører det, og en kunde der ikke ved
     * at feltet ruller, konkluderer at afdelingen ikke findes. Klassen sættes
     * af portal.js, kun når der faktisk er noget gemt. */
    .kmo-shop-ctx.has-more {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent);
    }

    /* Katalog-rækker: hver sektion på egen række. Why: tidligere blev variants,
     * stock og action alle tildelt samme grid-area ("actions") via :nth-child(n+3),
     * hvilket lagde dem oven på hinanden i samme celle (grid z-stacking) i stedet
     * for at flyde under hinanden. Navngivne areas pr. klasse i stedet. */
    .kmo-catalog-row {
        grid-template-columns: 64px 1fr auto;
        grid-template-areas:
            "thumb    info     info"
            "variants variants variants"
            "stock    stock    action";
        row-gap: 8px;
    }
    /* Størrelsen kommer fra ≤900-blokken (width: 100% af sporet). */
    .kmo-catalog-row__thumb    { grid-area: thumb; }
    .kmo-catalog-row__main     { grid-area: info; }
    .kmo-catalog-row__variants { grid-area: variants; }
    .kmo-catalog-row__stock    { grid-area: stock; align-items: center; flex-direction: row; gap: 10px; flex-wrap: wrap; }
    .kmo-catalog-row__action   { grid-area: action; justify-content: flex-end; align-self: center; }

    /* Form-grid (profil/password): én kolonne på telefon. */
    .kmo-form-grid { grid-template-columns: 1fr; }

    /* Produktdetalje: spec-grid bliver én kolonne. */
    .kmo-pd-spec-grid { grid-template-columns: 1fr; gap: 2px 0; }
    .kmo-pd-title { font-size: 19px; }

    /* Min-konto tabs — overflow scroll håndteres af generisk .kmo-tabs regel. */

    /* Dashboard: hoved-layout og shortcuts stacker. Kræver at de inline
     * grid-template-columns styles er fjernet fra render.php (gjort i 0.11). */
    .kmo-dashboard__main,
    .kmo-dashboard__shortcuts { grid-template-columns: 1fr; }

    /* Checkout: summary card under formular. */
    .kmo-checkout-grid { grid-template-columns: 1fr; }

    /* Knap-actions stretcher fuld-bredde i typiske handler-rows. */
    .kmo-page-header__actions .kmo-btn,
    .kmo-card__head .kmo-btn { flex: 1 1 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .kmo-cart-line--flagged,
    tr.is-flagged,
    tr[data-cart-iol-row].is-flagged {
        animation: none;
    }
    .kmo-sidebar,
    .kmo-shell__backdrop { transition: none; }
}

/* ===== Topbar notification bell ===== */
.kmo-notifications { position: relative; }
.kmo-notifications__popover {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 50;
    width: 320px;
    max-height: calc(60vh / var(--kmo-zoom));
    overflow-y: auto;
    padding: 14px;
    background: var(--kmo-surface);
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius-lg, 12px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.kmo-notifications__popover[hidden] { display: none; }
.kmo-notifications__head { margin-bottom: 10px; }
.kmo-notifications__head strong { font-size: 13.5px; }
.kmo-notifications__list { display: flex; flex-direction: column; gap: 10px; }
.kmo-notifications__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border-radius: var(--kmo-radius);
    background: var(--kmo-surface-2);
    border-left: 3px solid var(--kmo-border-strong);
}
.kmo-notifications__item strong { font-size: 13px; }
.kmo-notifications__item span { color: var(--kmo-text-muted); font-size: 12.5px; }
.kmo-notifications__item--warn { border-left-color: var(--kmo-warning, #F59E0B); }
.kmo-notifications__item--ok   { border-left-color: var(--kmo-success, #10B981); }

/* Variantens akser — styrke og cylinder — som egne, navngivne felter foran
   BC's frie varianttekst. De er førsteklasses valg på katalog og varekort, men
   blev kollapset til én streng i kurv, checkout og kvittering: netop de tre
   skærme hvor en forkert linse er dyrest. Sat i brødskriften, ikke mono, så
   tallene læses som tal og ikke som en kode. */
.kmo-variant-axes {
    font-family: var(--kmo-font);
    font-size: 12px;
    font-weight: 600;
    color: var(--kmo-text);
}

/* ============================================================
   Store skærme — ét skaleringstrin for hele app-shellen

   Portalen er tegnet i faste px omkring en ~1280px-kolonne. På en 27"/4K-
   skærm ved 100 % browserzoom står den som en lille ø med 14px-tekst midt i
   billedet. I stedet for at røre ved hver eneste px-værdi skalerer vi hele
   shellen ét trin ad gangen med `zoom` og lader kolonnen blive lidt bredere.

   Zoom sidder på <body>, ikke på .kmo-shell: drawers, lightbox, hjælpe-panel
   og bekræftelses-dialoger append'es til document.body og ville ellers stå i
   14px ved siden af en 18px-side. #wpadminbar zoomes tilbage, fordi WP's egen
   `html { margin-top: 32px }` kompenserer for en bar i 1:1.

   Media queries måles mod det UZOOMEDE viewport, så trinene er stabile —
   ingen feedback-løkke mellem zoom og breakpoint.
   ============================================================ */
body.kmo-portal-page { zoom: var(--kmo-zoom); }
body.kmo-portal-page #wpadminbar { zoom: calc(1 / var(--kmo-zoom)); }

@media (min-width: 1600px) {
    :root { --kmo-zoom: 1.08; --kmo-page-max: 1360px; }
}
@media (min-width: 2000px) {
    :root { --kmo-zoom: 1.16; --kmo-page-max: 1440px; }
}
@media (min-width: 2400px) {
    :root { --kmo-zoom: 1.25; --kmo-page-max: 1520px; }
}
@media (min-width: 3000px) {
    :root { --kmo-zoom: 1.35; --kmo-page-max: 1600px; }
}

/* ------------------------------------------------------------------
   Kunde-vaelger over historik-listerne (1.20.0).
   Rendres kun naar brugeren har mere end ét kunde-medlemskab, saa en
   almindelig portalbruger ser praecis den samme side som foer.
   ------------------------------------------------------------------ */
.kmo-scope-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: var(--kmo-gap);
}
.kmo-scope-bar__label {
    font-size: 12px;
    color: var(--kmo-text-muted);
    margin-right: 2px;
}
.kmo-scope-bar__btn {
    border: 1px solid var(--kmo-border);
    background: var(--kmo-surface);
    color: var(--kmo-text);
    border-radius: 999px;
    padding: 5px 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.3;
}
.kmo-scope-bar__btn:hover { background: var(--kmo-surface-2); }
.kmo-scope-bar__btn.is-active {
    background: var(--kmo-accent);
    border-color: var(--kmo-accent);
    color: #fff;
}

/* "Mine kunder og afdelinger" — gruppe pr. kunde paa Min konto. */
.kmo-account-customer + .kmo-account-customer { margin-top: var(--kmo-gap-lg); }
.kmo-account-customer__hd {
    padding: 12px 16px 8px;
    border-bottom: 1px solid var(--kmo-border);
}
.kmo-account-customer__hd strong { font-size: 14px; }

/* ===== Hylde: lignende varer (1.23.0) =====
   Vandret liste af kompakte kort under varen. Track'en scroller vandret paa
   smalle skaerme i stedet for at wrappe: fire kort der bliver til to raekker
   skubber resten af siden ned, og hylden er det NEDERSTE paa siden — den maa
   ikke vokse opad i indholdet. Paa mobil vises 1,2 kort (85 %), saa det er
   synligt at der er flere at scrolle til. */
.kmo-shelf {
    margin-top: var(--kmo-gap-lg);
    padding-top: var(--kmo-gap);
    border-top: 1px solid var(--kmo-border);
}

/* Overskrift og pile deler linje. Pilene staar til hoejre, hvor oejet slipper
   raekken — og de skjules helt naar der ikke er mere at bladre til. */
.kmo-shelf__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--kmo-gap);
    margin-bottom: var(--kmo-gap);
}

.kmo-shelf__title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--kmo-text);
}

.kmo-shelf__nav {
    display: flex;
    gap: 6px;
    flex: 0 0 auto;
}

.kmo-shelf__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius);
    background: var(--kmo-surface);
    color: var(--kmo-text);
    cursor: pointer;
}

.kmo-shelf__arrow:hover:not(:disabled) {
    border-color: var(--kmo-border-strong);
}

/* Slukket i stedet for skjult: forsvandt knappen, ville den anden hoppe til
   hoejre hver gang man naaede en ende. */
.kmo-shelf__arrow:disabled {
    opacity: .35;
    cursor: default;
}

/* Fire kort ad gangen, resten scrolles. Kolonnebredden er laast til en fjerdedel
   minus mellemrummene — ellers klemmer grid'et alle 16 ind paa raekkens bredde
   og kortene bliver ulaeselige. */
.kmo-shelf__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 3 * var(--kmo-gap)) / 4);
    gap: var(--kmo-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    /* Sporet scroller selv; rullebjaelken er stoej naar pilene staar lige over. */
    scrollbar-width: none;
}

.kmo-shelf__track::-webkit-scrollbar { display: none; }

/* Blød scroll er en animation, og den skal respektere systemets indstilling.
   Uden det her bevæger hylden sig stadig for en bruger der har slået
   bevægelse fra — og pilene er netop det sted på siden hvor noget FLYTTER sig
   af sig selv. */
@media (prefers-reduced-motion: reduce) {
    .kmo-shelf__track { scroll-behavior: auto; }
}

.kmo-shelf-card { scroll-snap-align: start; }

.kmo-shelf-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--kmo-cell-x);
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius-lg);
    background: var(--kmo-surface);
    text-decoration: none;
    color: inherit;
    transition: border-color .12s ease, box-shadow .12s ease;
}

.kmo-shelf-card:hover,
.kmo-shelf-card:focus-visible {
    border-color: var(--kmo-border-strong);
    box-shadow: var(--kmo-shadow);
}

.kmo-shelf-card__img {
    width: 100%;
    height: 96px;
    object-fit: contain;
    margin-bottom: 4px;
}

.kmo-shelf-card__img--empty {
    display: block;
    border-radius: var(--kmo-radius);
    background: repeating-linear-gradient(45deg, var(--kmo-surface-2) 0 6px, transparent 6px 12px);
}

.kmo-shelf-card__name {
    font-size: 13px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--kmo-text);
}

.kmo-shelf-card__no {
    font-size: 11.5px;
    color: var(--kmo-text-muted);
}

.kmo-shelf-card__price {
    margin-top: 2px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--kmo-text);
}

.kmo-shelf-card__was {
    font-size: 11.5px;
    font-weight: 400;
    color: var(--kmo-text-faint);
}

.kmo-shelf-card__price--muted {
    font-weight: 400;
    font-style: italic;
    color: var(--kmo-text-muted);
}

/* "Se varen" / "Vaelg variant" er en ETIKET og ikke en knap: hele kortet er
   linket, og en knap inden i et link giver to klikmaal der goer det samme. */
.kmo-shelf-card__cta {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 500;
    color: var(--kmo-primary);
}

@media (max-width: 1100px) {
    .kmo-shelf__track { grid-auto-columns: calc((100% - var(--kmo-gap)) / 2); }
}

/* Paa mobil vises 1,2 kort, saa det er SYNLIGT at der er flere at scrolle til.
   Pilene bliver staaende: en finger kan swipe, men en mus paa en smal skaerm
   kan ikke. */
@media (max-width: 640px) {
    .kmo-shelf__track { grid-auto-columns: 85%; }
}


/* ===== Klikmaal paa touch =====================================================

   Maalt 2026-09-18 med bin/probe-mobil-gennemgang.ps1 paa alle 13 portalsider
   ved 390 px. Ingen af siderne har vandret overloeb, og ingen tekst flyder
   over — men en raekke kontroller er for smaa til en finger.

   WCAG 2.5.8 (Target Size, Minimum) saetter 24 px som gulv og 44 px som maal.
   Fundene under gulvet var: antals-stepperens knapper (24 px brede, og de
   bruges hver gang en vare bestilles), hjaelpe-knappen (16x16), facet-pilen
   (18 px bred) og varenavnet i katalograekken (18 px hoejt — det primaere
   klikmaal for at aabne en vare).

   TEKNIKKEN ER PADDING MED MODSVARENDE NEGATIV MARGIN, ikke stoerre elementer.
   Klikfladen vokser, mens raekkehoejden og layoutet staar stille — saa
   designet er uaendret og kun traefsikkerheden bliver bedre. Det er samme
   greb .kmo-facet__toggle allerede brugte lodret; her faar den det ogsaa i
   bredden.

   `pointer: coarse` er den rigtige betingelse — det er fingeren og ikke
   skaermbredden der er problemet — men den kan ikke maales i headless Chrome.
   Bredde-betingelsen staar derfor ved siden af, saa reglerne kan verificeres
   med proben og samtidig gaelder for en touch-tablet bredere end 640 px. */
@media (max-width: 640px), (pointer: coarse) {

    /* Antals-stepperen. Den lille variant sad paa 24x28 i katalograekken og i
       kurven — det er den kontrol kunden SKAL ramme for at bestille. */
    .kmo-qty--sm { height: 34px; }
    .kmo-qty--sm button { width: 32px; font-size: 15px; }

    /* Hjaelpe-knappen: 16x16 er under halvdelen af gulvet.
       Padding virker IKKE her: box-sizing er border-box globalt, saa
       width:16px ville bare aede indholdet og knappen blive 16x16 endnu.
       Et usynligt ::after udvider i stedet trykfladen til 28x28 uden at
       roere cirklen — den ser ud praecis som foer. */
    .kmo-tip { position: relative; }
    .kmo-tip::after {
        content: '';
        position: absolute;
        inset: -6px;
    }

    /* Facet-pilen havde allerede hoejden; nu ogsaa bredden. */
    .kmo-facet__toggle {
        flex-basis: 28px;
        width: 28px;
        padding: 8px 5px;
        margin: -8px -5px;
    }

    /* Varenavnet i katalograekken — 18 px hoejt, og det er DEN vej ind til en
       vare fra listen. */
    a.kmo-catalog-row__name {
        display: inline-block;
        padding-block: 6px;
        margin-block: -6px;
    }

    /* Karrusellens pile. En finger paa 30x30 rammer lige saa ofte kortet ved
       siden af. */
    .kmo-shelf__arrow { width: 36px; height: 36px; }

    /* Knapper. 28 og 34 px er over WCAG-gulvet, men under de 44 der er maalet
       — og `.kmo-btn` er den knap der bekraefter en bestilling. Hoejden hæves
       frem for at give padding: knapperne staar i egne raekker, saa der ER
       plads, og en hoejere knap er nemmere at ramme end en med usynlig
       trykflade. */
    .kmo-btn    { height: 40px; }
    .kmo-btn--sm { height: 34px; }

    /* Topbarens ikonknapper. IKKE et usynligt ::after her, selvom det virkede
       paa hjaelpe-knappen inde i en etiket: de fire sidder side om side, og
       trykfelter der raekker ud over kanten ville overlappe hinanden — saa
       ville et tryk paa Notifikationer kunne ramme Hjaelp. Knapperne bliver i
       stedet rigtigt stoerre, og raekken er maalt til at holde paa 390 px. */
    .kmo-topbar__icon-btn,
    .kmo-topbar__help-btn { width: 36px; height: 36px; }

    /* Forstoer-knappen paa produktbilledet — samme stoerrelse som topbarens,
       og den staar frit, saa den kan bare vokse. */
    .kmo-pd-zoom { width: 36px; height: 36px; }

    /* FELTER SKAL VAERE MINDST 16px.
       iOS Safari zoomer automatisk ind naar et input med font-size under 16px
       faar fokus — og zoomer ikke ud igen. Maalt 2026-09-18: 28 felter paa
       katalogsiden alene, ned til 12px. I praksis betyder det at en indkoeber
       der trykker i soegefeltet paa en iPhone faar siden forstoerret og selv
       skal zoome ud bagefter. Det er den enkelte ting der mest faar portalen
       til at foeles som et website frem for en app.
       16px er graensen, ikke et smagsvalg: Safari zoomer ved 15,9. */
    input, select, textarea,
    .kmo-select, .kmo-input,
    /* select.kmo-select og select.kmo-input staar saadan i basis-blokken, og
       (0,1,1) slaar (0,1,0). Specificiteten skal matches, ikke gaettes. */
    select.kmo-select, select.kmo-input,
    .kmo-qty input, .kmo-qty--sm input,
    /* Disse tre har hver sin mere specifikke regel andetsteds i filen og
       vinder derfor over `input`/`select` alene. Soegefeltet er det vigtigste
       af dem: det er der en indkoeber starter paa katalogsiden. */
    .kmo-catalog-toolbar__search input,
    .kmo-topbar__search input,
    .kmo-catalog-row__variants select,
    .kmo-catalog-row__axis select { font-size: 16px; }

    /* Selvstaendige navigationslinks: kort-hovedets titel-link, "Se alle" og
       broedkrummen. De er 16-21 px hoeje, fordi hoejden er tekstens egen.
       WCAG's inline-undtagelse gaelder links MIDT i en tekstblok — disse staar
       for sig selv og er reelle navigationsmaal.

       Undtagelsen er bevidst ikke medtaget: et link som
       "leveringsbetingelserne" inde i en saetning maa ikke faa lodret padding,
       for saa overlapper trykfladerne linjerne over og under. */
    .kmo-card__head-link,
    .kmo-card__head > a,
    .kmo-pd-crumbs a {
        display: inline-block;
        padding-block: 5px;
        margin-block: -5px;
    }
}

/* Konfigurerbare varer: se assets/css/kmo-configurator.css (1.118.4). */

/* Leverandoer-linket som en raekke i Specifikationer. */
.kmo-pd-spec-link { color: var(--kmo-accent, #1f6f5c); text-decoration: none; }
.kmo-pd-spec-link:hover { text-decoration: underline; }

/* ============================================================
   1.49.0 — Favoritter (liste-siden + hjerteknappen)
   ============================================================ */
.kmo-fav-section { margin-bottom: var(--kmo-gap-lg); }
.kmo-fav-section .kmo-card__head { gap: 12px; }
.kmo-fav-empty { padding: 22px 20px; font-size: 13px; }
.kmo-fav-tbl td { vertical-align: middle; }
.kmo-fav-item { display: flex; align-items: center; gap: 12px; }
.kmo-fav-thumb { width: 44px; height: 44px; border-radius: 6px; object-fit: contain; background: var(--kmo-surface-2); flex-shrink: 0; }
.kmo-fav-thumb--empty { display: inline-block; }
.kmo-fav-order { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.kmo-fav-order .kmo-input.kmo-fav-qty { width: 72px; flex: 0 0 72px; height: 32px; }
/* .kmo-btn saetter display og vinder ellers over [hidden]. */
.kmo-fav-section [data-kmo-fav-add-all][hidden] { display: none; }
.kmo-fav-unit { font-size: 12px; min-width: 34px; }
.kmo-fav-side { width: 1%; white-space: nowrap; text-align: right; }

.kmo-fav-heart {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: none; border: 1px solid var(--kmo-border); border-radius: var(--kmo-radius);
    color: var(--kmo-text-muted); cursor: pointer; padding: 6px 10px; font-size: 13px; line-height: 1;
}
.kmo-fav-heart:hover { color: var(--kmo-text); border-color: var(--kmo-text-muted); }
.kmo-fav-heart.is-on { color: #c2344d; border-color: #c2344d; }
.kmo-fav-heart svg { flex-shrink: 0; }
.kmo-fav-heart.is-on svg path { fill: currentColor; }
.kmo-fav-menu {
    position: fixed; z-index: 120; min-width: 220px;
    background: var(--kmo-surface); border: 1px solid var(--kmo-border); border-radius: var(--kmo-radius);
    box-shadow: var(--kmo-shadow-lg); padding: 6px;
}
.kmo-fav-menu button {
    display: flex; width: 100%; align-items: center; gap: 8px; text-align: left;
    background: none; border: 0; border-radius: 6px; padding: 8px 10px; font-size: 13px; cursor: pointer; color: var(--kmo-text);
}
.kmo-fav-menu button:hover { background: var(--kmo-surface-2); }
.kmo-fav-menu button[aria-pressed="true"]::after { content: "✓"; margin-left: auto; color: #c2344d; }
/* Katalograekken: navn + et lille hjerte paa samme linje. */
.kmo-catalog-row__title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.kmo-catalog-row__title .kmo-catalog-row__name { min-width: 0; }
.kmo-catalog-row__title .kmo-fav-heart { padding: 3px 5px; border-color: transparent; flex-shrink: 0; }
.kmo-catalog-row__title .kmo-fav-heart:hover { border-color: var(--kmo-border); }

/* ------------------------------------------------------------------
 * KM Optics Partner (1.50.0) — kundeklubbens kort paa forsiden og Min konto.
 * Fremdriftsbjaelken har samme maal som fragtbjaelken i kurven.
 * ---------------------------------------------------------------- */
.kmo-club { --kmo-club-tone: var(--kmo-text-muted); --kmo-club-soft: var(--kmo-surface-2, #F3F5F7); }
.kmo-club--tier-1 { --kmo-club-tone: #8A5A2B; --kmo-club-soft: #F6EDE3; }
.kmo-club--tier-2 { --kmo-club-tone: #5B6570; --kmo-club-soft: #EEF1F4; }
.kmo-club--tier-3 { --kmo-club-tone: #8C6A12; --kmo-club-soft: #FAF1D7; }
.kmo-club--tier-4 { --kmo-club-tone: var(--kmo-primary); --kmo-club-soft: var(--kmo-primary-soft); }
.kmo-club .kmo-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.kmo-club__badge {
    display: inline-flex; align-items: center; padding: 2px 10px; border-radius: 999px;
    background: var(--kmo-club-soft); color: var(--kmo-club-tone); font-size: 12px; font-weight: 600;
}
.kmo-club__level { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.kmo-club__pct { font-size: 26px; font-weight: 600; line-height: 1.1; color: var(--kmo-club-tone); }
.kmo-club__pct-label { font-size: 13px; color: var(--kmo-text); }
.kmo-club__note { margin: 6px 0 0; font-size: 12px; color: var(--kmo-warning); }
.kmo-club__facts { list-style: none; margin: 12px 0 0; padding: 0; }
.kmo-club__facts li {
    display: flex; justify-content: space-between; gap: 12px; padding: 6px 0;
    border-top: 1px solid var(--kmo-border); font-size: 13px;
}
.kmo-club__ok { color: var(--kmo-success); font-weight: 600; text-align: right; }
.kmo-club__next { margin: 12px 0 0; font-size: 12.5px; color: var(--kmo-text-muted); }
.kmo-club__next strong { color: var(--kmo-text); }
.kmo-club__bar { height: 6px; border-radius: 3px; background: var(--kmo-border); margin-top: 6px; overflow: hidden; }
.kmo-club__bar span { display: block; height: 100%; background: var(--kmo-success); }
.kmo-club__more { display: inline-block; margin-top: 12px; font-size: 13px; }
.kmo-club__levels { width: 100%; border-collapse: collapse; margin-top: 18px; font-size: 13px; }
.kmo-club__levels th {
    text-align: left; font-weight: 600; font-size: 12px; color: var(--kmo-text-muted);
    padding: 6px 8px; border-bottom: 1px solid var(--kmo-border);
}
.kmo-club__levels td { padding: 8px; border-bottom: 1px solid var(--kmo-border); }
.kmo-club__levels tr.is-current td { background: var(--kmo-club-soft); font-weight: 600; }
.kmo-club .kmo-club__rules { margin: 16px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--kmo-text-muted); }

/* ---------------------------------------------------------------------------
 * Forsidens hylder (subspecialeplanen S3, 1.66.0): ét kort med faner og en
 * vandret række, der kan scrolles. Lav og rolig, så "Seneste ordrer" forbliver
 * over folden.
 * ------------------------------------------------------------------------- */
.kmo-shelves { margin-top: var(--kmo-gap); padding: 0; overflow: hidden; }
.kmo-shelves__head {
    display: flex;
    gap: 4px;
    padding: 8px 12px 0;
    border-bottom: 1px solid var(--kmo-border);
    overflow-x: auto;
    scrollbar-width: none;
}
.kmo-shelves__head::-webkit-scrollbar { display: none; }
.kmo-shelves__tab {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 12px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--kmo-text-muted);
    font: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease;
}
.kmo-shelves__tab:hover { color: var(--kmo-primary); }
.kmo-shelves__tab.is-active { color: var(--kmo-primary); border-bottom-color: var(--kmo-primary); }
.kmo-shelves__tab:focus-visible { outline: 2px solid var(--kmo-primary); outline-offset: -2px; }
.kmo-shelves__count {
    min-width: 18px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--kmo-surface-2);
    color: var(--kmo-text-muted);
    font-size: 11.5px;
    line-height: 18px;
    text-align: center;
}
.kmo-shelves__row {
    display: flex;
    gap: 12px;
    padding: 14px 16px 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 16px;
    -webkit-overflow-scrolling: touch;
}
.kmo-shelves__row[hidden] { display: none; }
.kmo-shelves__item {
    flex: 0 0 148px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px;
    border: 1px solid var(--kmo-border);
    border-radius: var(--kmo-radius-lg);
    color: inherit;
    text-decoration: none;
    scroll-snap-align: start;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.kmo-shelves__item:hover,
.kmo-shelves__item:focus-visible {
    border-color: var(--kmo-primary);
    box-shadow: 0 2px 8px rgba(28, 61, 90, .08);
    transform: translateY(-1px);
    outline: none;
}
.kmo-shelves__img {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 72px;
    margin-bottom: 4px;
    border-radius: var(--kmo-radius);
    background: var(--kmo-surface-2);
}
.kmo-shelves__img img { max-width: 100%; max-height: 72px; object-fit: contain; }
.kmo-shelves__img:has(img) { background: none; }
.kmo-shelves__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
}
.kmo-shelves__no { font-size: 11.5px; color: var(--kmo-text-muted); }
@media (prefers-reduced-motion: reduce) {
    .kmo-shelves__item, .kmo-shelves__tab { transition: none; }
    .kmo-shelves__item:hover { transform: none; }
}

/* Forsidens tal på smalle skærme (UI-gennemgang 2026-09-25): de to tal side om
   side og "Sidst bestilte IOL" — et langt varenavn — i fuld bredde og lidt
   mindre, i stedet for 2 + 1 med et hul og et navn der brydes over tre linjer. */
@media (max-width: 600px) {
    .kmo-stat-grid { grid-template-columns: 1fr 1fr; }
    .kmo-stat-grid [data-kmo-stat="last_iol"] { grid-column: 1 / -1; order: 3; }
    .kmo-stat-grid [data-kmo-stat="last_iol"] .kmo-stat__value { font-size: 18px; line-height: 1.3; }
}

/* Min konto → Aftaler (Legal\LegalAccountPane). Rækker der bryder om på en
   telefon i stedet for en tabel med fire smalle kolonner. */
.kmo-legal-acct { list-style: none; margin: 0; padding: 0; }
.kmo-legal-acct__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    padding: 14px 20px;
    border-top: 1px solid var(--kmo-border);
}
.kmo-legal-acct__row:first-child { border-top: 0; }
.kmo-legal-acct__main { min-width: 0; flex: 1 1 260px; }
.kmo-legal-acct__line { margin-top: 4px; font-size: 13px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.kmo-legal-acct__k { color: var(--kmo-text-muted); min-width: 72px; }
.kmo-legal-acct__action { font-size: 13px; }
.kmo-legal-acct__action a:not(.kmo-btn) { color: var(--kmo-primary); }