/* MySpecialDay Designer — Frontend CSS v1.9.2 — iOS-pink tema */

/* Tokens:
   --accent:      #e8849f   (lyserød primær)
   --accent-dark: #c14878   (tekst / aktiv / hover)
   --accent-pale: #fbeaf0   (lys fyld / borders)
   --panel:       #ffffff   (paneler)
   --surface:     #f2f2f7   (sideflade / wrap-baggrund)
   --canvas-bg:   #e8e8ed   (canvas-sideflade)
   --radius-lg:   12px      (paneler / wrap)
   --radius-md:   10px      (knapper / felter)
   --radius-pill: 20px      (pille-knapper / faner)
*/

/* ════════════════════════════════════════════════════════════════════════════
   FULDSKÆRMS-EDITOR-SKAL (Fase 0, v1.67.0) — ÉT-TRINS
   Erstatter to-kolonne-mounten for MSD-designer-aktive produkter. CSS Grid med
   rækker header(56) / subbar(48) / midter(1fr) / footer(56) og midter-kolonner
   [venstre-skinne 80 | lærred auto | højre 280]. header/subbar/left/footer er
   TOMME placeholdere i Fase 0. Minimal styling: grå lærred + hvidt papir-kort
   (canvas-CSS'en længere nede er uændret). Corjl-tokens pr. region kommer senere.
   ════════════════════════════════════════════════════════════════════════════ */
/* Design-tokens — ÉT kanonisk block. v1.122.2: hejst fra body.msd-editor-fullscreen til :root, så
   ALLE frontend-flader (editor + produktside + konto) kan konsumere dem. Vars gør intet af sig selv
   (konsumeres kun hvor var(--…) står), så hoisting ændrer intet visuelt. Dette block er override-
   punktet for en kommende indstillings-side (MSD → Indstillinger). REGEL: nye elementer i editor-
   chrome/købspanel bruger disse vars — ALDRIG rå hex. */
:root {
    /* AKSENT-PALETTEN (v1.2.0: tekstil-tryk.dk's GRØNNE — værdierne fra OPGAVE-nyt-layout).
       TOKEN-NAVNENE bliver stående som `--pink-*`. Det er samme regel som `MSD_*`-klasserne og
       `msd_*`-tabellerne (CLAUDE.md, "interne navne består"): navnet er kontrakten mellem CSS,
       MSD_Theme::TOKENS og admin-fanen Udseende, og en omdøbning ville koste et sweep gennem
       3.100 CSS-linjer + en options-migrering uden at ændre én pixel. Værdierne er skiftet ét
       sted — hele editoren, produktsiden og "Mine designs" følger med. */
    --pink: #809f82;                      /* CTA-flade, aktive piller (grøn) */
    --pink-hover: #6f8c71;                /* hover på CTA */
    --pink-strong: #5f7f62;               /* grøn tekst på hvid, overskrifter */
    --pink-strong-hover: #4c6650;         /* hover på grøn tekst / ghost-tekst */
    --pink-soft: #edf2ed;                 /* rækker / piller / fyld / fokus-ring / ghost-base */
    --pink-tint: #f5f8f5;                 /* lysere liste-zone UNDER rækkerne */
    --pink-soft-hover: #e2ebe2;           /* ghost-knap-hover */
    --pink-border: #d3ded3;               /* grønne kanter / rammer */
    --on-pink: #ffffff;                   /* tekst på grønne knapper */
    --danger: #c0392b;                    /* fejl-tekst */
    /* System-notice-farver (IKKE tema-farver → ikke i Udseende-fanens whitelist). v1.132.3. */
    --warning-bg: #fdf0e5;                /* advarsel-notice flade (fx ugyldigt design-link) */
    --warning-border: #f0d5b8;            /* advarsel-notice kant */
    --warning-fg: #8a5a1a;                /* advarsel-notice tekst */
    --success: #1e8a1e;                   /* bekræftelses-grøn ("Lagt i kurv") */
    --green: #34c759; --bg: #f2f2f7; --fg: #1c1c1e; --card: #ffffff; --border: #e3e3e8;
    --muted: #f2f2f7; --muted-fg: #8a8a8e;
    /* v1.2.0: lærred-fladen er mockup'ens #ececf1, og --fg-soft er dens mellemgrå (#545454)
       til tekst der skal læses, men ikke råbe (topbarens produktnavn, filfakta). */
    --stage: #ececf1; --fg-soft: #545454;
    /* v1.2.0 / NYT LAYOUT — faste mål. Ét sted, så en justering ikke skal jages i seks regler. */
    /* v1.26.0: sitets eget orange (målt på "DESIGN & LÆG I KURV"). Det bruges nu fire
       steder — "Se din pris", købsknappen i tilbuddet, "Gå til kurv" og deres hover — og
       et hex gentaget fire steder bliver til fire lidt forskellige oranger. */
    --tt-orange: #B35B3A; --tt-orange-strong: #9A4B2D;
    --tt-topbar-h: 64px; --tt-rail-w: 86px;
    /* v1.240.1: panelet 20 % bredere (400 → 480 px) — Johns ønske 17/9. clamp: på smalle
       skærme (< ~1330 px) beholdes 400 px, så lærredet ikke betaler for den ekstra plads. */
    --tt-panel-w: clamp(400px, 30vw, 480px);
    --tt-rail-bg: #232326; --tt-rail-active: #3a3a3e; --tt-rail-hover: #2c2c30;
    --tt-rail-fg: #c9c9ce; --tt-rail-fg-active: #ffffff;
    --tt-sticky-h: 56px;           /* sitets faste bund-bjælke (mystickyelements): klik-død zone */
    --tt-warn: #e0a12b;            /* gul dpi-prik (mellem "klar" og "for lav") */
    --tt-checker: #e9e9ee;         /* ternet transparens-baggrund i trykfil-previewet */
    --tt-danger-soft: #fbeceb; --tt-danger-border: #eec9c5;
    --font-ui: 'Inter', system-ui, sans-serif;
    --font-display: 'Cormorant Garamond', serif;
    --font-script: 'Instrument Serif', serif;
    /* v1.122.0 — UI-skala (editor-chrome + købspanel). ALT i px (roden til skredet var rem/px-
       blanding: Fase 11 satte px, v1.119-1.121 rem). Nye UI-elementer i chrome/købspanel SKAL
       bruge disse vars — aldrig nye px/rem-værdier. Farve-delen af tema-tokens UDESTÅR (se CLAUDE.md).
       Dette block er ÉT sted og tiltænkt som override-punkt for en senere indstillings-side. */
    --fs-display: 26px; /* KUN produktsidens H1 + pris-total (landingsside-hierarki; må være > panelets 19px) */
    --fs-title: 19px;  /* panel-titel (fx "Bordkort") */
    --fs-base:  14px;  /* knapper, CTA, primær tekst */
    --fs-body:  13px;  /* felter, navne-rækker, hint */
    --fs-label: 11px;  /* labels, caps-overskrifter, tæller-pille */
    --fw-normal: 400;
    --fw-strong: 600;  /* knapper + overskrifter */
    --ctl-lg: 39px;    /* CTA, tilvalg-selects, panel-knapper i #msd-actions */
    --ctl-sm: 30px;    /* navn-input, "Tilføj", side-chip, pagebar-knapper */
    --ctl-touch: 44px; /* min. touch-mål på primære produktside-knapper i mobil-media-queryen (Apples minimum) */
    /* v1.126.0 — form-tokens (radius). Nye knapper/felter bruger en ROLLE (se CLAUDE.md
       "Knap-/felt-roller") — aldrig nye rå radius-værdier. */
    --radius-sm: 8px;     /* kompakte knapper/chips, små felter/rækker */
    --radius-md: 10px;    /* primære/sekundære knapper, felter, kort-elementer */
    --radius-pill: 999px; /* KUN bevidst pille-form (stepper-ender, tæller-pille, chips) */
}

body.msd-editor-fullscreen { margin: 0; background: var(--stage); }
/* Skjul evt. tema-rester (wp_head kan stadig udskrive en admin-bar / skip-links). */
body.msd-editor-fullscreen #wpadminbar { display: none !important; }
html { margin-top: 0 !important; }

.msd-editor-shell {
    display: grid;
    grid-template-areas:
        "header  header  header"
        "subbar  subbar  subbar"
        "pagebar pagebar pagebar"
        "left    canvas  right";
    /* v1.73.0 / Fase 6: minmax(0,1fr) lader midterrækken (lærred) scrolle INTERNT.
       v1.83.0: 40px-række til side-fanerne (pagebar) under subbaren.
       v1.89.1: footer-rækken fjernet — sidefaner i pagebar (v1.83.0) + zoom i subbar (v1.89.1)
       → footeren er tom og skjules (.msd-region-footer display:none nedenfor). */
    grid-template-rows: 56px 48px 40px minmax(0, 1fr);
    grid-template-columns: 80px 1fr 280px;
    /* Editoren fylder præcis FØRSTE skærm; WC-produktindholdet følger UNDER ved scroll. */
    height: 100vh;
    height: 100svh;
    background: var(--stage);
}
.msd-region { box-sizing: border-box; }
/* v1.68.0 / Fase 1: TOPBAR (hvid, 56px, bund-border). UI-fonte scopes til chrome — ALDRIG til lærredet. */
.msd-region-header {
    grid-area: header;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px;
    font-family: var(--font-ui);
}
.msd-topbar-left { display: flex; align-items: baseline; gap: 14px; min-width: 0; }
.msd-logo {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1;
    color: var(--pink-strong);
    white-space: nowrap;
}
.msd-logo-tld { color: var(--pink); }
.msd-topbar-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    color: var(--muted-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.msd-topbar-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.msd-topbar-link {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    color: var(--muted-fg);
    text-decoration: none;
    transition: color 0.12s ease;
}
.msd-topbar-link:hover,
.msd-topbar-link:focus { color: var(--pink-strong); }
/* v1.81.3: permanent Kurv-link — ikon + tekst inline; arver font/farve/hover fra .msd-topbar-link. */
.msd-topbar-cart { display: inline-flex; align-items: center; gap: 6px; }
.msd-topbar-cart svg { display: block; }
@media (max-width: 600px) { .msd-topbar-title { display: none; } }
/* v1.69.0 / Fase 2: SUBBAR (hvid, 48px, bund-border). Venstre: Fortryd/Gentag. Højre: gem-status.
   INGEN tekst-værktøjer her (B/I/U, align, farve, font → højre panel i senere fase). */
.msd-region-subbar {
    grid-area: subbar;
    background: var(--card);
    border-bottom: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 20px;
    font-family: var(--font-ui);
}
.msd-subbar-left { display: flex; align-items: center; gap: 8px; }
.msd-subbar-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--card);
    color: var(--fg);
    font-family: var(--font-ui);
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.msd-subbar-btn svg { display: block; }
.msd-subbar-btn:hover:not(:disabled) { background: var(--pink-soft); color: var(--pink-strong); border-color: var(--pink); }
.msd-subbar-btn:disabled { opacity: 0.4; cursor: default; }
.msd-subbar-right { display: flex; align-items: center; }
.msd-save-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--muted-fg);
}
.msd-save-status[data-state="saved"] { color: var(--fg); }
.msd-save-status[data-state="saved"]::before {
    content: "";
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--green);
    flex-shrink: 0;
}
/* v1.70.0 / Fase 3: VENSTRE IKON-SKINNE (hvid, 80px, højre-border). Lodrette ikon+label-knapper. */
.msd-region-left {
    grid-area: left;
    background: var(--card);
    border-right: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 8px 6px;
    font-family: var(--font-ui);
}
.msd-rail-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 9px 2px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--fg);
    font-family: var(--font-ui);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
}
.msd-rail-btn svg { display: block; }
.msd-rail-btn span { white-space: nowrap; }
.msd-rail-btn:hover:not(:disabled) { background: var(--muted); }
/* Aktiv/valgt ikon (klar til senere faser med panel-skift): pink-soft + pink-strong. */
.msd-rail-btn.is-active { background: var(--pink-soft); color: var(--pink-strong); }
/* Deaktiveret (gating off) — fx Bibliotek uden tilknyttet bibliotek. */
.msd-rail-btn:disabled { opacity: 0.38; cursor: default; }
.msd-rail-btn.is-placeholder { color: var(--muted-fg); }
/* v1.79.1: Farver var funktionsløs placeholder (Fase 3) — skjult. (v1.80.0: Lag genaktiveret.) */
.msd-editor-shell #msd-rail-colors { display: none !important; }

/* v1.70.0: den gamle "+ Tekst/+ Billede/+ Bibliotek"-bar i højre panel er erstattet af skinnen —
   skjul den visuelt i editor-skallen (funktionen lever videre via skinnen). */
.msd-editor-shell #msd-add-tools { display: none !important; }
.msd-region-canvas {
    grid-area: canvas;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px;
    min-width: 0;
    /* v1.73.0 / Fase 6: min-height:0 kræves for at grid-barnet kan krympe og scrolle internt
       (høje designs) i stedet for at skubbe hele siden. */
    min-height: 0;
}
/* v1.136.0: fit-to-width + zoom. Lærredets display-bredde styres af CSS-var --msd-cv-w (sat af
   applyCanvasScale = fit-basis × zoom), som løfter de !important max-width-caps på .msd-canvas-wrap
   (760px) OG Fabrics .canvas-container (500px). Backing-store gentegnes SAMTIDIG i korrekt opløsning
   (dynamisk retina-faktor i JS) → skarpt på dpr1/dpr2 ved alle niveauer. .is-fitwidth = altid når en
   bredde er beregnet (også 100%); .is-zoomed (>100%) markerer overflow (visningen scroll-centreres i JS).
   margin:auto + flex:0 0 auto centrerer. (Erstatter v1.89.x's faste-buffer CSS-skalering.) */
.msd-region-canvas.is-fitwidth .msd-canvas-wrap {
    width: var(--msd-cv-w, 100%) !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: auto;
}
.msd-region-canvas.is-fitwidth .msd-canvas-container .canvas-container { max-width: none !important; }
.msd-region-right {
    grid-area: right;
    background: var(--card);
    border-left: 1px solid #e5e5ea;
    overflow-y: auto;
    padding: 16px;
    min-width: 0;
}
/* v1.89.1: footeren er tom (sidefaner → pagebar v1.83.0, zoom → subbar v1.89.1) → skjul den. */
.msd-region-footer { display: none; }
/* v1.89.1: zoom-kontrollen i top-subbaren, til højre for Fortryd/Gentag. */
.msd-subbar-left .msd-subbar-zoom { margin-left: 12px; }
/* v1.83.0: side-fane-bar i toppen (under subbaren). Sidefanerne (.msd-footer-pages) flyttes hertil
   af frontend-JS; container giver hvid flade + bund-border + vandret scroll ved mange sider. */
.msd-region-pagebar {
    grid-area: pagebar; background: var(--card); border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 6px; padding: 0 16px; overflow-x: auto;
    font-family: var(--font-ui); scrollbar-width: none;
}
.msd-region-pagebar::-webkit-scrollbar { display: none; }

/* ── v1.121.0: Gem/Hent/Download i pagebaren (DESKTOP) ─────────────────────────
   JS (matchMedia min-width:901px) flytter hele #msd-actions-noden op i pagebaren på
   desktop; på mobil bliver den i panelet (region-right) med UÆNDRET fuld-bredde-format
   (de eksisterende .msd-region-right #msd-actions-regler gælder kun dér). Her: kompakt
   vandret række, HØJRE-stillet (chips til venstre). Chips scroller internt så knapperne
   aldrig skubbes ud af barren. Scope = pagebar-placeringen (ikke knappen globalt). */
.msd-region-pagebar #msd-actions {
    display: flex; flex-direction: row; align-items: center; gap: 6px;
    /* v2.16.0 (FEJL 4): raekken kan nu KRYMPE og scrolle internt. Med flex: 0 0 auto blev den
       hoejre-stillede raekke bredere end pladsen naar admin-chippen ("Ret design skabelon")
       var med, og overloebet roeg ud over VENSTRE kant — chippen stod halvt klippet. */
    flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none;
    margin: 0 0 0 auto; /* yderst til højre; side-chips til venstre */
}
.msd-region-pagebar #msd-actions::-webkit-scrollbar { display: none; }
/* Pagebar-kontekst (kompakt 28px): rolle-udtryk = sekundær-rollen. width/margin/padding !important
   = tema-værn (slår temaets .button auto-bredde/padding + margin). */
.msd-region-pagebar #msd-actions .msd-btn-save,
.msd-region-pagebar #msd-actions .msd-btn-fetch,
.msd-region-pagebar #msd-actions .msd-btn-admin,
.msd-region-pagebar #msd-actions .msd-btn-share,
.msd-region-pagebar #msd-actions .msde-btn-download {
    display: inline-flex; align-items: center; justify-content: center;
    width: auto !important; margin: 0 !important; box-sizing: border-box;
    padding: 6px 12px !important; line-height: 1.2 !important;
    /* tvunget !important: skal slå rollens fs-base-tema-værn (!important) for at få kompakt
       pagebar-fs — fjernes hvis rollens fs-!important engang kan svækkes. Kendt intern gæld. */
    font-size: var(--fs-body) !important;
    text-decoration: none; white-space: nowrap;
}
/* Chips fylder/scroller til venstre og krymper FØR de skubber knapperne ud. */
.msd-region-pagebar .msd-footer-pages {
    flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none;
}
.msd-region-pagebar .msd-footer-pages::-webkit-scrollbar { display: none; }

/* v1.83.0: logo-link — udseende 1:1 (arver logo-stil), kun klikbart. */
.msd-logo-link { text-decoration: none; cursor: pointer; display: inline-flex; align-items: center; }

/* Canvas-wrap: neutralisér de gamle to-kolonne-bredder (50%) inde i editor-skallen,
   så lærredet fylder lærred-regionen. */
.msd-editor-shell .msd-canvas-wrap {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 760px !important;
    min-width: 0;
}
/* Summary i højre region: fuld bredde, ingen tema-margin; titel kompakt. */
.msd-editor-shell .msd-summary { width: 100%; margin: 0; padding: 0; }
.msd-editor-shell .msd-summary .product_title { font-size: var(--fs-title); margin: 0 0 8px; }
.msd-editor-shell .msd-summary .price { margin: 0 0 12px; }

/* ── Fase 7 (v1.74.0): mobil-only kontroller — skjult på desktop (uændret desktop) ── */
/* v1.145.0: .msd-mobilebar (fast bund-bjælke) hører også til mobil-only-sættet.
   v1.149.0: .msd-textbar (mobil tekst-værktøjsbjælke) ligeså — vises KUN på ≤900 når
   body.msd-textbar-open er sat (tekst-element valgt).
   v1.152.0: .msd-toolbar-panel (værktøjs-subpanelet under bundbjælkens række 1) ligeså — det er
   fixed og mountes i skallen, så det SKAL med i mobil-only-sættet for ikke at hænge på desktop. */
.msd-mobile-btn,
.msd-sheet-header,
.msd-mobilebar,
.msd-textbar,
.msd-toolbar-panel,
.msd-mobile-backdrop { display: none; }

/* ════════════════════════════════════════════════════════════════════════════
   Fase 7 (v1.74.0) — MOBIL / RESPONSIV (≤900px). Lærred får hovedpladsen; venstre
   skinne → hamburger-drawer; højre panel → bottom sheet (genbruger to-tilstands-
   logikken via .is-editing + body.msd-sheet-open); footer kompakt m. vandret fane-scroll.
   Desktop (>900px) er HELT uændret. ════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* Enkelt-kolonne stak: header / subbar / lærred / footer. Skinne + panel er
       position:fixed (taget UD af grid-flowet) og vises som drawer/sheet. */
    .msd-editor-shell {
        grid-template-areas:
            "header"
            "subbar"
            "pagebar"
            "canvas"
            "buybar";
        /* v1.83.0: pagebar (side-faner) 44px-række. v1.89.1: footer-rækken fjernet (tom footer skjult).
           v1.145.0: buybar (fast bund-bjælke) som ny auto-række nederst — in-flow, så sheet+backdrop
           (position:fixed, højere z-index) glider op OVER den. */
        /* v1.206.0 (Johns fund 13/9): ÉN menu-række i toppen. Undertavlen (subbar: "Ikke gemt"
           + hamburger) og den tomme side-fane-række (pagebar) er væk på mobil — Fortryd/Gentag
           bor allerede i lærreds-dokken, og bund-navigationen afløser hamburgeren. */
        grid-template-rows: 56px 0 0 minmax(0, 1fr) auto;
        /* v1.143.3: minmax(0,1fr) — 1fr's default min-width:auto lod subbarens min-content (~490px)
           sprænge sporet, så ALLE regioner strakte til ~497px og blev klippet. minmax(0,…) lader
           kolonnen krympe til viewport uanset indhold. */
        grid-template-columns: minmax(0, 1fr);
        height: 100svh;
    }
    /* v1.83.0: side-faner scroller vandret i toppen på mobil. */
    .msd-region-pagebar { overflow-x: auto; flex-wrap: nowrap; padding: 0 10px; }
    .msd-region-pagebar .msd-footer-page { min-height: 32px; }
    body.msd-editor-fullscreen { overflow-x: hidden; }   /* ingen vandret side-scroll */
    /* v1.206.0: subbar + pagebar er skjult på mobil (rækkerne er kollapset til 0 ovenfor). */
    body.msd-editor-fullscreen .msd-region-subbar,
    body.msd-editor-fullscreen .msd-region-pagebar { display: none; }
    /* v1.205.0 (Johns iOS-fund 13/9): på RIGTIG iOS Safari klipper `overflow-x:hidden` på body
       ikke en grid-region der bliver bredere end skærmen — så højre-forankrede knapper (roter i
       hjørnet, "Se din pris"-pillen) havnede UDEN FOR skærmen, selvom Chromium/Playwright viste
       det korrekt. Værn: hverken skallen eller nogen region må være bredere end viewport, og hver
       region klipper sit eget overløb. (Jf. samme klasse fejl som v1.143.3's min-content-spræng.) */
    body.msd-editor-fullscreen .msd-editor-shell { max-width: 100vw; overflow-x: hidden; }
    body.msd-editor-fullscreen .msd-region { min-width: 0; max-width: 100vw; }

    /* v1.143.3: SUBBAR kompakt på mobil, så dens indhold reelt kan være der på ~390px (undgår at
       den vokser sporet). Fortryd/Gentag = ikon-only (title/aria bevaret); strammere gaps/padding.
       Fallback: overflow-x:auto KUN på subbaren → aldrig klipning hvis den mod forventning er bred. */
    .msd-region-subbar { padding: 0 10px; gap: 8px; overflow-x: auto; scrollbar-width: none; }
    .msd-region-subbar::-webkit-scrollbar { display: none; }
    .msd-subbar-left { gap: 6px; min-width: 0; }
    #msd-undo, #msd-redo { padding: 0 8px; }
    #msd-undo > span, #msd-redo > span { display: none; }   /* ikon-only (title bevaret) */
    .msd-subbar-left .msd-subbar-zoom { margin-left: 6px; }
    .msd-subbar-zoom.msd-footer-zoom { gap: 4px; }

    /* Mobil-knapper (hamburger + køb) i subbaren. Tap-mål ≥40px. */
    .msd-mobile-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; flex: 0 0 auto;
        border: 1px solid var(--border); border-radius: 10px;
        background: var(--card); color: var(--fg); cursor: pointer;
    }
    .msd-mobile-btn:active { background: var(--pink-soft); color: var(--pink-strong); }
    .msd-mobile-product { margin-left: 8px; }

    /* v1.152.0: HAMBURGEREN UDGÅR på mobil — venstre-skinnens knapper spejles nu som chips i
       bundbjælkens række 1 (.msd-mobilebar-tools), så skuffen er overflødig. Markup + skinne +
       hele msd-rail-open-mekanikken er BEVARET urørt (desktop >900px bruger skinnen som
       grid-kolonne; parse-guarden mobileRail.test.js låser fortsat åbne-reglen). */
    #msd-mobile-menu { display: none; }

    /* v2.16.0: EKSPLICIT grid-area paa de to fixed-regioner. Deres desktop-areas ("left"/"right")
       findes ikke i mobil-templaten, og et grid-barn med et UKENDT area-navn faar implicitte
       linjer = en implicit 1px-raekke i 100svh-skallen (maalt: rows ...162.195px 1px). Fixed
       positionering goer raekken usynlig i praksis, men den stjal ~1px fra canvas-sporet og er
       praecis den slags faelde der bider naar nogen aendrer position senere. Gotcha #71. */
    .msd-region-left, .msd-region-right { grid-area: canvas; }
    /* …og FOOTEREN var den faktiske synder: den er IN-FLOW (ikke fixed), har intet area i
       mobil-templaten og auto-placeres derfor i en implicit række — det var DEN der målte 1px.
       v1.89.1 fjernede footer-rækken fra templaten og kaldte den "skjult", men den blev aldrig
       display:none. Nu er den det: et display:none-barn skaber ingen tracks. Desktop urørt
       (dér har templaten stadig sit footer-areal via sine egne regler). */
    body.msd-editor-fullscreen .msd-editor-shell .msd-region-footer { display: none; }

    /* VENSTRE SKINNE → drawer der glider ind fra venstre under header+subbar. */
    .msd-region-left {
        position: fixed; top: 104px; left: 0; bottom: 0;
        width: 84px; z-index: 60;
        border-right: 1px solid var(--border);
        transform: translateX(-100%);
        transition: transform 0.22s ease;
        box-shadow: 2px 0 14px rgba(0, 0, 0, 0.14);
    }
    body.msd-rail-open .msd-region-left { transform: translateX(0); }

    /* HØJRE PANEL → bottom sheet der glider op fra bunden. Åbnes manuelt (køb-knap →
       body.msd-sheet-open, tilstand A) ELLER automatisk ved element-valg (.is-editing,
       tilstand B). Indholds-skiftet A/B styres af de eksisterende Fase 4-regler. */
    .msd-region-right {
        position: fixed; left: 0; right: 0; bottom: 0; top: auto;
        width: auto; max-height: 82svh;
        border-left: none; border-top: 1px solid var(--border);
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.18);
        transform: translateY(110%);
        transition: transform 0.24s ease;
        z-index: 70; overflow-y: auto;
        padding-top: 0;
    }
    body.msd-sheet-open .msd-region-right,
    .msd-region-right.is-editing { transform: translateY(0); }

    /* Sheet-header: grabber + luk (sticky øverst i arket). */
    .msd-sheet-header {
        display: flex; align-items: center; justify-content: center;
        position: sticky; top: 0; z-index: 1;
        background: var(--card); padding: 8px 12px; min-height: 40px;
    }
    .msd-sheet-grabber {
        width: 40px; height: 4px; border-radius: 2px; background: var(--border);
    }
    .msd-sheet-close {
        position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
        width: 32px; height: 32px; border: none; background: none;
        font-size: 1.4rem; line-height: 1; color: var(--muted-fg); cursor: pointer;
    }

    /* Backdrop bag drawer/sheet. */
    .msd-mobile-backdrop { position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, 0.38); }
    body.msd-rail-open .msd-mobile-backdrop,
    body.msd-sheet-open .msd-mobile-backdrop { display: block; }

    /* Lærred fylder bredden; designet centreret. */
    .msd-region-canvas { padding: 12px; overflow: auto; min-height: 0; }
    .msd-editor-shell .msd-canvas-wrap { max-width: 100% !important; }

    /* Footer kompakt: faner scroller vandret hvis mange sider. */
    .msd-region-footer { padding: 0 10px; }
    .msd-footer-pages { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .msd-footer-pages::-webkit-scrollbar { display: none; }
    .msd-footer-page { min-height: 36px; }
    .msd-zoom-btn { width: 36px; height: 36px; }

    /* Topbar-links kompakte. */
    .msd-topbar-title { display: none; }

    /* ── v1.145.0: FAST BUND-BJÆLKE (buybar-grid-rækken). v1.146.0: TO rækker —
       række 1 = Gem/Hent/Download (#msd-actions flyttet hertil af F.placeActions),
       række 2 = fuld-bredde primær CTA der åbner bund-sheet'et (F.openBuySheet).
       CTA-udtryk (fyld/tekst/radius/vægt/fs/hover) = PRIMÆR-rollen; row1-knapperne =
       SEKUNDÆR-rollen (fra rolle-registret); her KUN layout/kontekst. Sheet (z-index 70) +
       backdrop (z-index 50) ligger over → glider op OVER bjælken uden at den stikker igennem. ── */
    .msd-mobilebar {
        display: flex; flex-direction: column; gap: 8px;
        grid-area: buybar;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
        background: var(--card);
        border-top: 1px solid var(--border);
        box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.08);
    }
    /* v1.146.0: RÆKKE 1 — de tre action-knapper som lige brede, kompakte ghost-knapper.
       Fyld/tekst/radius/vægt = SEKUNDÆR-rollen (.msd-btn-save/.msd-btn-fetch/.msde-btn-download
       er allerede medlemmer); her KUN layout + kompakt højde/skrift. */
    .msd-mobilebar #msd-actions {
        /* v1.146.1: centrér (ingen stretch); v1.146.2: TEMA-VÆRN — se > *-reglen. */
        display: flex; align-items: center; gap: 8px; width: 100%; margin: 0;
    }
    /* v1.146.1/v1.146.2: ENS højde på alle tre — TEMA-VÆRN (gotcha #53). Reproducerer IKKE på
       Local (neutralt tema → alle 34px); det er Flatsome-arv på live: containeren arvede default
       align-items:stretch, og temaets <button>-boks er intrinsisk højere (~45px) → rækken voksede
       og strakte KUN <button>'erne, mens <a class="button"> blev på sin højde (34). Værn: eksplicit
       `height` med !important (temaets button-højde kan ellers vinde på live) + box-sizing:border-box
       + containeren centrerer (ingen stretch) → alle tre præcis 34px. Kun row1 (#msd-actions i
       bjælken) — "Se din pris"-rækken har sin egen regel; desktop-pagebar er scoped ude. */
    .msd-mobilebar #msd-actions > * {
        flex: 1 1 0; min-width: 0; height: 34px !important; box-sizing: border-box;
        display: inline-flex; align-items: center; justify-content: center;
        padding: 0 8px;
        font-size: var(--fs-label) !important;   /* kompakt; slår sekundær-rollens --fs-base */
        text-decoration: none;                    /* #msd-fetch-design er et <a class="button"> */
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    /* ── v1.152.0: RÆKKE 1 (ØVERST) — VÆRKTØJS-CHIPS, dynamisk spejl af venstre-skinnen
       (frontend/mobile-toolbar.js). Samme chip-mønster som element-bjælkens chips: ikon over
       label, ghost-flade, aktiv = --pink-soft. Bjælken er IN-FLOW (buybar-grid-rækken), så den
       ekstra række krymper lærred-rækken (1fr) automatisk — designet havner ALDRIG bag bjælken
       (v1.145.0-mønsteret; ingen fit-beregning skal kende bjælkens højde). ── */
    .msd-mobilebar-tools { display: flex; gap: 6px; width: 100%; }
    .msd-toolbar-chip {
        flex: 1 1 0; min-width: 0; min-height: var(--ctl-touch);
        display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 2px; padding: 6px 2px; margin: 0;
        border: 1px solid var(--border); border-radius: var(--radius-md);
        background: var(--card); color: var(--fg);
        font-family: var(--font-ui); font-size: var(--fs-label); font-weight: var(--fw-normal);
        cursor: pointer;
    }
    .msd-toolbar-chip.is-active {
        background: var(--pink-soft); border-color: var(--pink-border);
        color: var(--pink-strong); font-weight: var(--fw-strong);
    }
    /* Gating spejles fra skinnen (disabled) — samme dæmpede look som .msd-rail-btn:disabled. */
    .msd-toolbar-chip:disabled { opacity: 0.38; cursor: default; }
    .msd-toolbar-chip > span {
        max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }

    /* ── v1.204.0 (Johns mockup 12/9): FAST BUND-NAVIGATION — en mørk bjælke nederst
       (Upload · Tekst · Produkt · Hjælp) i stedet for tre lyse kort ØVERST i mobilbaren.
       Rækkefølgen vendes med flex-order: Gem/Hent øverst, "Se din pris" i midten, den mørke
       nav nederst i tommelzonen. Handlingerne er uændrede — chip-tap = skinnens/hjælpens egen
       handler (regel 5). ── */
    .msd-mobilebar #msd-actions { order: 1; }
    body.msd-layout-v2 .msd-mobilebar .msd-see-price { order: 2; }
    .msd-mobilebar-tools {
        order: 3; gap: 2px; background: var(--tt-rail-bg); border-radius: 0;
        /* Ud til kanterne og ned i safe-area, så den mørke nav er bundens fundament.
           ⚠ width:auto (ikke basens 100%) — ellers låser bredden sig til indholdsboksen, og de
           negative margener kan ikke strække den helt ud til HØJRE kant (Johns fund 13/9).
           Med width:auto strækker flex den til fuld bredde + de -12px giver ægte full-bleed. */
        width: auto;
        margin: 4px -12px calc(-8px - env(safe-area-inset-bottom, 0px));
        padding: 7px 6px calc(9px + env(safe-area-inset-bottom, 0px));
    }
    .msd-mobilebar-tools .msd-toolbar-chip {
        background: transparent; border: 0; border-radius: var(--radius-sm);
        color: var(--tt-rail-fg); gap: 3px; font-weight: var(--fw-strong);
        /* v1.247.0: målt til SEKS punkter på 375 px (Upload · Tekst · Navne · Produkt · Katalog ·
           Hjælp) — vandret padding 0, etiketten klipper med ellipsis frem for at bryde linjen. */
        padding-left: 0; padding-right: 0;
    }
    .msd-mobilebar-tools .msd-toolbar-chip.is-active { background: transparent; color: var(--tt-rail-fg-active); }
    .msd-mobilebar-tools .msd-toolbar-chip.is-active svg { color: var(--tt-orange); }
    .msd-mobilebar-tools .msd-toolbar-chip:disabled { opacity: 0.4; }
    /* Hjælp bor nu i bund-navigationen — skjul den dublerede hjælpe-knap i headeren på mobil. */
    body.msd-layout-v2 .msd-help-btn { display: none; }

    /* Glide-op-subpanel: FIXED (ikke i bjælkens grid-række) — ellers ville bjælken vokse og
       skubbe/re-centrere lærredet, præcis det canvas-hop v1.150.1 lukkede. Sidder lige OVER
       bjælken via --msd-mobilebar-h (sat i JS ved åbning; fallback dækker 3 rækker). */
    .msd-toolbar-panel {
        display: block;   /* slår mobil-only-sættets display:none (samme specificitet, senere) */
        position: fixed; left: 0; right: 0; z-index: 61;
        bottom: var(--msd-mobilebar-h, 148px);
        max-height: 40svh; overflow-y: auto;
        padding: 10px 12px;
        background: var(--card);
        border-top: 1px solid var(--border);
        box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.08);
    }
    .msd-toolbar-panel[hidden] { display: none; }
    /* De ADOPTEREDE panel-noder (lag-panel, bibliotek-vælger) er selv fixed/draggable med inline
       styles — neutralisér dem til almindeligt flow INDE i subpanelet. Generisk (> *), så et
       fremtidigt værktøjspanel virker uden ny regel. !important slår panelernes inline-styles. */
    .msd-toolbar-panel > * {
        position: static !important;
        inset: auto !important;
        width: auto !important; max-width: none !important;
        max-height: none !important;
        margin: 0 !important;
        box-shadow: none !important;
        border: none !important;
        background: transparent !important;
    }
    /* Element-bjælken og værktøjs-subpanelet er aldrig åbne samtidig (mobile-toolbar.js lukker
       det ene når det andet åbner); dette er det rene CSS-værn hvis en tilstand skulle overlappe. */
    body.msd-textbar-open .msd-toolbar-panel { display: none; }

    /* v1.96.0 (Johns mobil-gennemgang, bid 1): den grønne CTA er væk — "Se din pris" bor nu
       som NEDERSTE række i bjælken (F.placeSeePrice), lille og fuldbred i stedet for den
       kæmpe absolutte knap oven på trøjen. Egen-reglens absolute/hjørne-geometri nulstilles. */
    /* v1.206.0 (Johns fund 13/9): "Se din pris" skal kun være ÉT sted — i toppen. Den nederste
       kopi (#msd-see-price, flyttet ind af placeSeePrice) skjules på mobil; header-knappen står. */
    body.msd-layout-v2 .msd-mobilebar .msd-see-price { display: none; }

    /* ── v1.145.0 / TEMA-VÆRN (mobil): skjul temaets flydende "Kontakt os"-bar (My Sticky
       Elements) i editor-fuldskærm på mobil, hvor den ellers ligger oven på den nye bund-bjælke.
       Defensiv, scoped selector: kun plugin'ets stabile rod-container #mystickyelements under
       vores editor-body — påvirker ALDRIG almindelige sider. !important = dokumenteret theme-guard.
       v1.150.2: LIVE-fund — pluginets faktiske container er #mystickyelement-widget-0 med klassen
       .mystickyelements-fixed (fixed, z-index 100) → id-selektoren ramte aldrig, og baren
       overlejrede bund-bjælken/textbaren. Klasse-selektoren dækker alle widget-id-varianter
       (gotcha #53-mønster: tredjeparts-fixed-element → !important-værn). ── */
    body.msd-editor-fullscreen #mystickyelements,
    body.msd-editor-fullscreen .mystickyelements-fixed { display: none !important; }

    /* ── v1.146.4: i EDITOREN på mobil skjules alt under bundbjælken — WC-produktindholdet
       (faner/beskrivelse/relaterede) under editor-skallen. Scoped til body.msd-editor-fullscreen,
       så den NORMALE produktside (body.msd-product-page, uden ?design=1) beholder indholdet.
       Desktop-editoren (>900px) er uden for denne media-query → uændret. ── */
    body.msd-editor-fullscreen .msd-product-content { display: none; }

    /* ── v1.149.0: MOBIL TEKST-VÆRKTØJSBJÆLKE (.msd-textbar, FPD-mønster). Vises KUN når et
       tekst-element er valgt (body.msd-textbar-open, sat af frontend/mobile-textbar.js) og
       AFLØSER .msd-mobilebar imens (skjules) — canvas forbliver synligt (intet sheet/backdrop).
       Struktur (column): [subpanel (glider op OVER bjælken, maks ~40svh)] [head: pill + ×]
       [5 chips]. Subpanelet HUSER de flyttede .msd-control-group-noder fra region-right.
       Chips = ghost-chip-mønsteret (som side-chips/mobilebar-række 1); aktiv = --pink-soft. ── */
    /* v1.150.1: mobilebaren skjules med visibility (IKKE display:none) — dens buybar-grid-række
       BEHOLDER sin layoutplads, så canvas-regionen ikke vokser og re-centrerer (~51px hop) når
       textbaren åbner. Textbaren (fixed) overlejrer den blot (FPD-mønster: canvas flytter 0px). */
    body.msd-textbar-open .msd-mobilebar { visibility: hidden; pointer-events: none; }
    body.msd-textbar-open .msd-textbar   { display: block; }
    .msd-textbar {
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
        background: var(--card);
        border-top: 1px solid var(--border);
        box-shadow: 0 -3px 14px rgba(0, 0, 0, 0.08);
        padding: 6px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    }
    .msd-textbar-head {
        display: flex; align-items: flex-start; gap: 8px;
        padding: 2px 0 6px;
    }
    /* v1.150.0: toprækken huser den FLYTTEDE tekst-gruppe (region-right's #msd-text-input) i
       stedet for "Tekst valgt"-pill'en — live-binding følger med noden. Kompakt: gruppens
       uppercase-label skjules, feltet er 2-3 linjer højt og scroller lodret ved længere tekst
       (em-baseret maks-højde = størrelses-agnostisk ift. tokens/skala).
       v1.151.0: slot'en huser OGSÅ en kort billed-label (ren tekst) eller info-teksten (.is-info,
       én linje m. ellipsis) for billed-elementer. */
    .msd-textbar-text {
        flex: 1 1 auto; min-width: 0; align-self: center;
        font-family: var(--font-ui); font-size: var(--fs-base); font-weight: var(--fw-strong);
        color: var(--fg);
    }
    .msd-textbar-text.is-info {
        font-size: var(--fs-body); font-weight: var(--fw-normal); color: var(--muted-fg);
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    .msd-textbar-text.is-info .msd-image-info { margin: 0; padding: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .msd-textbar-text .msd-control-group { margin: 0; }
    .msd-textbar-text .msd-control-group label { display: none; }
    .msd-textbar-text textarea {
        min-height: 2.4em; max-height: 4.6em;   /* ≈ 2-3 linjer; mere tekst → intern scroll */
        overflow-y: auto; resize: none;
    }
    .msd-textbar-close {
        flex: 0 0 auto;
        width: 32px; height: 32px; border: none; background: none;
        font-size: 1.4rem; color: var(--muted-fg); cursor: pointer;
    }
    /* v1.247.0 (Custom Inks tekst-bar): chips i én SWIPE-RÆKKE med fast bredde — før blev
       syv chips klemt ned i én linje. Snap pr. chip, skjult scrollbar, blød fade i højre kant
       som "der er mere". Rækken går ud til bjælkens kanter (negativ margen) så første chip
       flugter med tekstfeltet og sidste kan scrolles helt ind. */
    .msd-textbar-chips {
        display: flex; gap: 6px;
        overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity; scrollbar-width: none;
        margin: 0 -12px; padding: 2px 12px;
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
                mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent);
    }
    .msd-textbar-chips::-webkit-scrollbar { display: none; }
    .msd-textbar-chip {
        flex: 0 0 74px; min-width: 0; min-height: var(--ctl-touch); scroll-snap-align: start;
        display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 3px; padding: 6px 2px;
        border: 0; border-radius: var(--radius-md);
        background: transparent; color: var(--fg);
        font-family: var(--font-ui); font-size: var(--fs-label); font-weight: var(--fw-normal);
        cursor: pointer;
    }
    .msd-textbar-chip > svg { width: 26px; height: 26px; color: var(--tt-orange); flex: 0 0 auto; }
    .msd-textbar-chip > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .msd-textbar-chip.is-active {
        background: var(--pink-soft);
        color: var(--pink-strong); font-weight: var(--fw-strong);
    }
    /* Centrér og Duplikér har egne chips i rækken — i "Lag"-panelet vises kun lag + justering. */
    .msd-textbar-panel .msd-act-row .msd-act-group:has([id$="-center"]),
    .msd-textbar-panel .msd-act-row .msd-act-group:has([id$="-duplicate"]) { display: none; }
    /* v2.16.2: laast lag → chippen er graa, men FORTSAT trykbar: den skal kunne aabne panelet
       hvor forklaringen "Låst af designeren" staar. Derfor ingen pointer-events: none. */
    .msd-textbar-chip.msd-chip-locked { color: var(--muted-fg); opacity: .55; }
    .msd-textbar-chip.msd-chip-locked.is-active { color: var(--muted-fg); }
    /* Subpanel: ét felt ad gangen (den flyttede kontrol-gruppe), canvas stadig synligt. */
    .msd-textbar-panel {
        max-height: 40svh; overflow-y: auto;
        margin: 0 -12px 8px; padding: 10px 12px;
        border-bottom: 1px solid var(--border);
    }
    .msd-textbar-panel[hidden] { display: none; }
    .msd-textbar-panel .msd-control-group { margin: 0; }
}

/* ── To-kolonne layout (TwentyTwentyFive er block-tema — WC loader ikke
   woocommerce-layout.css, som ellers ville give float-baserede kolonner).
   Vi sætter flexbox eksplicit på .product-containeren via body-klasse.
   v1.9.3: flex-direction + !important på bredder forhindrer summary-kollaps til 0. ── */

body.msd-designer-active div.product {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: 2em;
    align-items: flex-start;
    width: 100%;
    box-sizing: border-box;
}

/* Venstre kolonne — canvas (erstatter galleri) */
body.msd-designer-active .msd-canvas-wrap {
    flex: 0 0 calc(50% - 1em) !important;
    width: calc(50% - 1em) !important;
    max-width: calc(50% - 1em) !important;
    min-width: 0;
    float: none !important;
    box-sizing: border-box;
}

/* Højre kolonne — produkt-summary (titel, pris, kontroller, læg-i-kurv).
   v1.9.3: explicit width + !important + position:relative for at overrule
   eventuelle tema-regler der kollapser kolonnen til 0. */
body.msd-designer-active div.product .summary.entry-summary {
    flex: 0 0 calc(50% - 1em) !important;
    width: calc(50% - 1em) !important;
    max-width: calc(50% - 1em) !important;
    min-width: 0;
    float: none !important;
    clear: none !important;
    position: relative !important;
    box-sizing: border-box;
}

/* CSS-backup: skjul WC-galleriet hvis remove_action ikke tog (fx race-condition).
   Rammer KUN det native galleri — vores .msd-canvas-wrap er undtaget. */
body.msd-designer-active .woocommerce-product-gallery:not(.msd-canvas-wrap) {
    display: none !important;
}

/* v1.9.4: Tema-template har en wp-block-columns i summary med 2 underkolonner:
   [1] et redundant WooCommerce produkt-billede-blok (flex-basis 512px) og [2]
   titel/pris/kurv (flex-grow 1, basis 0). Når galleri-overtagelsen reflower
   summary til ~392px, æder den 512px billed-underkolonne hele bredden →
   titel/pris/kurv kollapser til 0 (deraf den lodrette titel).
   Scopet under .woocommerce.product med vilje — må ikke lække til andre sider. */
.woocommerce.product .wp-block-columns .wp-block-column:first-child { flex: 0 1 auto !important; }
.woocommerce.product .wp-block-columns .wp-block-column { min-width: 0 !important; }

/* ── Canvas ──────────────────────────────────────────────────────────────── */

/* v1.9.4: container er flex-centreret uden grå baggrund — grå tomrum væk.
   .canvas-container er Fabric-wrapper'en (oprettes af Fabric); max-width 500
   begrænser visningen til venstre kolonne uden at strække over. Interne
   canvas-dims (urørt — koordinat-/eksport-konsistens, gotcha #23).
   v1.9.5: Fabric's <canvas>-elementer er position:absolute → wrapper'en har
   0 layout-højde. På smal/stablet bredde lagde produkt-info'en sig OVEN PÅ
   wrapperen → overlap. Fix: aspect-ratio sættes dynamisk på wrapperEl fra
   JS (pageWpx/pageHpx) så wrapperen reserverer korrekt layout-højde for
   ETHVERT design. Inderste canvas får height:100% (fylder wrapper'en). */
.msd-canvas-container {
    position: relative;
    border-radius: 12px;
    /* v1.38.2: lysegrå sideflade bag papiret (spejler backend) så papirets kant altid ses. */
    background: #e8e8ed !important;
    padding: 14px;
    box-sizing: border-box;
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    justify-content: center !important;
    line-height: 0;
}

.msd-canvas-container .canvas-container {
    width: 100% !important;
    max-width: 500px !important;
    height: auto !important;
}

/* v1.136.1: isolér editor-lærredet mod TREDJEPARTS-overlays. Editoren genbruger temaets
   .woocommerce-product-gallery (= .msd-canvas-wrap), og andre plugins injicerer elementer DIREKTE
   i den gallery-container (fx Easy Sale Badges / Sale Booster .asnp-esb-badge-element, wishlist-
   ikoner, zoom-lup) → de flyder oven på canvas i editor-visningen. Whitelist: skjul ALT i wrappen der
   ikke er MSD's egen canvas-container (eller den legacy side-vælger). KUN i editor-visningen
   (body.msd-editor-fullscreen) — produktsiden UDEN editor (body.msd-product-page) er urørt, så badges
   virker der. MSD's egne overlays (slet/pille/zoom) mountes på <body>, ikke i wrappen → uberørt. */
body.msd-editor-fullscreen .msd-canvas-wrap > *:not(#msd-canvas-container):not(.msd-page-switcher) {
    display: none !important;
}

/* Begge Fabric-canvaslag fylder wrapperen. Papir-looket (baggrund/kant/skygge) må KUN
   ligge på .lower-canvas — .upper-canvas er interaktionslaget ovenpå og SKAL være
   transparent, ellers dækker det designet (regression v1.38.2 → fix v1.38.3). */
.msd-canvas-container .canvas-container > canvas {
    width: 100% !important;
    height: 100% !important;
    border-radius: 8px;
    box-sizing: border-box;
}

/* v1.38.2/v1.38.3: tydelig papirkant + blød skygge KUN på det nederste (tegne-)lag. */
.msd-canvas-container .canvas-container > canvas.lower-canvas {
    background: var(--card);
    border: 1px solid #d1d1d6;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

/* v1.38.3: interaktionslaget må aldrig have baggrund (ville dække designet). */
.msd-canvas-container .canvas-container > canvas.upper-canvas {
    background: transparent !important;
}

/* v1.11.0 / 2c-1c: side-vælger (prev / N-N / næste) under canvas.
   Vises kun ved >1 side (JS injicerer i .msd-canvas-wrap). iOS-pink tema. */
.msd-page-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 10px;
    line-height: 1;
}
.msd-page-nav {
    width: 32px; height: 32px;
    border: none; border-radius: 16px;
    background: var(--pink-soft); color: var(--pink-strong);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.12s, color 0.12s, opacity 0.12s;
}
.msd-page-nav:hover:not(:disabled) { background: var(--pink); color: var(--on-pink); }
.msd-page-nav:disabled { opacity: 0.35; cursor: default; }
.msd-page-indicator {
    font-size: 0.85rem; font-weight: 600;
    color: var(--pink-strong);
    min-width: 40px; text-align: center;
    user-select: none;
}

.msd-safe-zone {
    position: absolute;
    inset: 0;
    border: 2px dashed rgba(220, 0, 0, 0.45);
    pointer-events: none;
}

/* ── Undo/Redo ───────────────────────────────────────────────────────────── */

.msd-undo-redo { display: flex; gap: 6px; margin-bottom: 0; }
.msd-btn-undoredo {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px;
    border: none; border-radius: 10px;
    background: var(--card); color: var(--pink-strong); cursor: pointer;
    transition: background 0.15s, color 0.15s;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
}
.msd-btn-undoredo:hover:not(:disabled) { background: var(--pink-soft); color: var(--pink-strong); }
.msd-btn-undoredo:disabled { opacity: 0.35; cursor: default; }

/* ── Designer-wrap (højre kolonne — kontroller) ──────────────────────────── */

.msd-designer-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    background: var(--bg);
    border-radius: 12px;
    margin-bottom: 16px;
}

/* v1.120.2: panel-rækkefølge via flex `order` (samme mønster som v1.120's .msd-summary-blok;
   ingen DOM-flytning). Tilvalg (vælg-én-gang) OVER navnelisten (kundens arbejdsområde, fast
   klods ~405px der ellers skubbede tilvalg under folden); actions nederst. Skjulte/0-højde
   børn (add-tools, sidebar i tilstand A) parkeres sidst — deres funktion/visning er urørt.
   Gælder desktop-panel OG mobil-bottom-sheet (samme .msd-designer-wrap). Uden
   .msd-unique-names-panel (ikke-unik) er rækkefølgen stadig tilvalg → actions. */
.msd-designer-wrap .msd-options            { order: 1; }
.msd-designer-wrap .msd-unique-names-panel { order: 2; }
.msd-designer-wrap .msd-actions            { order: 3; }
.msd-designer-wrap .msd-add-tools          { order: 4; }
.msd-designer-wrap .msd-sidebar            { order: 5; }

/* ── Sidebar / edit-panel ────────────────────────────────────────────────── */

.msd-sidebar {
    background: var(--card);
    border-radius: 12px;
    /* v1.38.2: kompakt i tom placeholder-tilstand (kun teksten + lidt luft). */
    padding: 6px 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
/* v1.38.2: fuld polstring KUN når et element er valgt (layer-controls vises via inline display). */
.msd-sidebar:has(#msd-layer-controls[style*="display: block"]) { padding: 16px; }
.msd-sidebar-title {
    font-size: 0.9rem; font-weight: 700;
    margin: 0 0 12px; padding-bottom: 8px;
    border-bottom: 1px solid var(--pink-soft);
    color: var(--pink-strong);
}

.msd-no-selection { color: #aaa; font-size: 0.9rem; padding: 4px 0; }

/* ── Tilvalg-dropdowns (v1.37.0; layout v1.38.2) ──────────────────────────── */
/* Label venstre, dropdown ud til højre kant — gælder alle tilvalg ens. */
.msd-options { margin-bottom: 14px; }
.msd-option-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}
.msd-option-label { font-size: var(--fs-body); color: var(--fg); }
.msd-option-select { flex: 0 1 auto; max-width: 60%; }

.msd-control-group { margin-bottom: 14px; }
.msd-control-group label {
    display: block; font-size: 0.75rem; font-weight: 700;
    color: var(--pink-strong); margin-bottom: 4px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.msd-control-group textarea,
.msd-control-group select,
.msd-control-group input[type="number"] {
    width: 100%; box-sizing: border-box;
    border: 1px solid var(--pink-border); border-radius: 8px;
    padding: 6px 8px; font-size: 0.9rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.msd-control-group textarea:focus,
.msd-control-group select:focus,
.msd-control-group input[type="number"]:focus {
    outline: none;
    border-color: var(--pink);
    box-shadow: 0 0 0 2px var(--pink-soft);
}
/* v1.11.1: smal skriftstørrelse-input — kompakt, ikke fuld bredde. */
.msd-control-group .msd-font-size-input { width: 80px; text-align: center; }

/* ── Justering knapper ───────────────────────────────────────────────────── */

.msd-align-buttons { display: flex; gap: 4px; }
.msd-align-buttons button {
    width: 32px; height: 32px;
    border: 1px solid var(--pink-border); border-radius: 8px;
    background: var(--pink-soft); color: var(--pink-strong);
    cursor: pointer; font-size: 16px;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.msd-align-buttons button:hover { background: var(--pink); color: var(--on-pink); border-color: var(--pink); }
/* v1.10.0: aktiv align-knap — pink fyld matcher backends valgte tilstand. */
.msd-align-buttons button.active { background: var(--pink); color: var(--on-pink); border-color: var(--pink); }

/* SVG-flex-kollaps (v1.141.1 → v1.142.2 → v1.143.4 GENERALISERET): inline-SVG'er med KUN
   width/height som ATTRIBUT (ingen CSS-bredde) kollapser til 0 px på flex-hovedaksen i Chrome →
   tomme firkanter i editorens flex-knapper (justering, lag-panel, mobil hamburger/køb-knap, …).
   `flex: 0 0 auto` lader SVG'en bruge sin egen intrinsiske attribut-størrelse (ingen hardkodet px;
   flex-egenskaben er harmløs for ikke-flex-knapper). ÉN generel editor-scopet regel dækker ALLE
   knapper i skallen → ingen ny selector pr. knap-type fremover. Lag-panelet mountes på <body>
   (UDEN for .msd-editor-shell) → beholder sin egen eksplicitte selector. Rører ikke produktsiden. */
.msd-editor-shell button > svg,
.msd-layers-list .msd-layer-btn svg { flex: 0 0 auto; }

/* ── Farvepalette ────────────────────────────────────────────────────────── */

.msd-color-palette { display: flex; flex-wrap: wrap; gap: 6px; }
.msd-color-swatch-btn {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2px solid #fff;
    outline: 1px solid rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.1s;
}
.msd-color-swatch-btn:hover { transform: scale(1.2); }
/* v1.10.0: aktiv farve — mørkere ring så den valgte farve er tydelig.
   Spejler den taktile feedback fra backends FloatingTextToolbar. */
.msd-color-swatch-btn.active {
    transform: scale(1.15);
    outline: 2px solid var(--pink-strong);
    outline-offset: 1px;
}

/* ── Billedbibliotek ─────────────────────────────────────────────────────── */

.msd-image-library { max-height: 260px; overflow-y: auto; }
.msd-category-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.msd-cat-tab {
    padding: 3px 12px;
    font-size: 0.8rem;
    border: 1px solid var(--pink-border);
    border-radius: var(--radius-pill);
    background: var(--pink-soft);
    color: var(--pink-strong);
    cursor: pointer;
    transition: background 0.12s;
}
.msd-cat-tab:hover:not(.active) { background: var(--pink-soft); border-color: var(--pink); }
.msd-cat-tab.active { background: var(--pink); color: var(--on-pink); border-color: var(--pink); }

.msd-image-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.msd-lib-thumb {
    cursor: pointer; border-radius: 8px; overflow: hidden;
    border: 2px solid transparent; aspect-ratio: 1;
    transition: border-color 0.12s;
}
.msd-lib-thumb:hover { border-color: var(--pink); }
.msd-lib-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* v1.78.0: tom-/henter-tilstand i bibliotek-picker (grid spænder over alle 3 kolonner). */
.msd-picker-empty { grid-column: 1 / -1; margin: 0; padding: 16px 4px; color: var(--muted-fg); font-size: 0.9rem; text-align: center; }

/* ── Billede-upload zone (v1.12.0 / 2c-2b) ─────────────────────────────── */

.msd-upload-zone {
    border: 2px dashed var(--pink-border);
    border-radius: 10px;
    padding: 16px 12px 10px;
    text-align: center;
    background: var(--pink-soft);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    /* v1.170.1: feltet er ankeret for det gennemsigtige fil-input der dækker hele zonen. */
    position: relative;
}
/* v1.170.1 — SAFARI-SIKKERT FIL-FELT: inputtet ligger USYNLIGT OVEN PÅ hele zonen, så kundens
   klik rammer INPUTTET direkte. Ingen label-videresendelse og ingen programmatisk .click() er
   nødvendig i panelet — netop de to mønstre der er skrøbelige i Safari. Teksten/ikonet nedenfor
   er ren dekoration (pointer-events: none), så den aldrig "spiser" klikket. */
/* v1.11.3 — FIL-FELTET UDEN FOR UPLOAD-ZONEN SKAL VÆRE USYNLIGT.
   Reglen nedenfor gør input'et til zonens klikflade (inset 0, 100 %) — dét skal blive.
   Men ligger feltet IKKE i en zone (layoutet flytter rundt på panelet), tegner browseren
   det med sin egen tekst: Johns skærmbillede 26/8 viste "Der er ikke valgt nogen fil"
   midt oven på en åben dialog.
   ⚠ Derfor `:not()` og ikke bare id'et. Et rent `#msd-upload-input` ville vinde på
   specificitet OGSÅ inde i zonen og tage klikfladen OG træk-og-slip med sig — en
   rettelse der ødelægger uploaden for at fjerne en tekst. */
:not(.msd-upload-zone) > #msd-upload-input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.msd-upload-zone input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}
.msd-upload-zone .msd-upload-label,
.msd-upload-zone .msd-upload-status { pointer-events: none; }
.msd-upload-zone:hover,
.msd-upload-zone.msd-drag-over {
    border-color: var(--pink);
    background: #fde8ef;
}
.msd-upload-zone.msd-uploading {
    opacity: 0.6;
    pointer-events: none;
}
.msd-upload-label {
    display: block;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--pink-strong);
    line-height: 1.4;
    user-select: none;
}
.msd-upload-status {
    margin: 6px 0 0;
    font-size: 0.8rem;
    min-height: 1em;
    line-height: 1.3;
}
.msd-upload-status.msd-upload-error   { color: #c0392b; }
.msd-upload-status.msd-upload-loading { color: var(--pink-strong); }

/* ── Kilde-faner FIL/QR (v1.16.0 / 2c-2c) ──────────────────────────────── */

.msd-source-tabs {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.msd-source-tab {
    flex: 1;
    border: 1px solid var(--pink-border);
    border-radius: 18px;
    background: var(--pink-soft);
    color: var(--pink-strong);
    padding: 6px 10px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: background 0.12s;
}
.msd-source-tab:hover:not(.active) { border-color: var(--pink); }
.msd-source-tab.active {
    background: var(--pink);
    color: var(--on-pink);
    border-color: var(--pink);
}

/* ── QR-upload zone (v1.16.0 / 2c-2c) ──────────────────────────────────── */

.msd-qr-zone {
    text-align: center;
    padding: 12px 8px;
    border: 2px dashed var(--pink-border);
    border-radius: 10px;
    background: var(--pink-soft);
}
.msd-qr-start-btn {
    background: var(--pink);
    color: var(--on-pink);
    border: none;
    border-radius: 20px;
    padding: 8px 18px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
}
.msd-qr-start-btn:hover:not(:disabled) { background: var(--pink-strong); }
.msd-qr-start-btn:disabled { opacity: 0.55; cursor: default; }
.msd-qr-display { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.msd-qr-img {
    width: 200px; height: 200px;
    background: var(--card);
    border-radius: 10px;
    padding: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.msd-qr-hint { font-size: 0.8rem; color: var(--pink-strong); margin: 4px 0 0; }
.msd-qr-status { font-size: 0.82rem; color: #555; margin: 4px 0 0; min-height: 1em; }
.msd-qr-status.msd-qr-ok  { color: #1f8a3e; }
.msd-qr-status.msd-qr-err { color: #c0392b; }

/* ── Unik-felt navneliste-panel (v1.18.0 / 2c-3) ───────────────────────── */

.msd-unique-names-panel {
    background: var(--card);
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    margin-bottom: 0;
}
.msd-unique-names-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: var(--fs-base);
    font-weight: var(--fw-strong);
    color: var(--pink-strong);
    margin: 0 0 4px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--pink-soft);
}
/* v1.120.0 / DEL 2: live navne-tæller ved overskriften. */
.msd-unique-names-count {
    font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--pink-strong);
    background: var(--pink-soft); border-radius: var(--radius-pill); padding: 1px 8px;
}
.msd-unique-names-hint {
    font-size: var(--fs-body);
    font-weight: var(--fw-normal);
    color: var(--muted-fg);
    margin: 6px 0 10px;
    line-height: 1.4;
}
.msd-unique-names-add {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.msd-unique-name-input {
    flex: 1 1 0%;
    /* v1.120.3: bryd flexbox `min-width: auto`-fælden. Uden dette får text-inputtet en intrinsic
       minimumsbredde fra HTML-default `size` (~20 tegn ≈ 172px) → rækken (input 172 + 6 gap + ~64
       knap) overflowede panelet og skubbede "Tilføj" ud af højre kant (Safari håndhæver hårdest). */
    min-width: 0;
    height: var(--ctl-sm); box-sizing: border-box;
    border: 1px solid var(--pink-border);
    border-radius: var(--radius-sm);
    padding: 6px 10px;
    font-size: var(--fs-body);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.msd-unique-name-input:focus {
    outline: none;
    border-color: var(--pink);
    box-shadow: 0 0 0 3px var(--pink-soft);
}
/* Kontekst: kun layout; udtryk = primær-rollen (radius-pill/hover er rolle-modifier/rolle). */
.msd-unique-name-add {
    flex: 0 0 auto; /* v1.120.3: må aldrig krympes/skubbes ud af rækken */
    height: var(--ctl-sm); box-sizing: border-box;
    padding: 6px 16px;
}
/* v1.120.0 / DEL 2: fast højde (~6 rækker) + intern scroll — panelet vokser ALDRIG med antal navne. */
.msd-unique-names-list {
    list-style: none;
    padding: 4px;
    margin: 0;
    max-height: 210px;
    overflow-y: auto;
    border: 1px solid var(--pink-border);
    border-radius: var(--radius-sm);
    background: var(--pink-tint);
}
.msd-unique-name-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--pink-soft);
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    font-size: var(--fs-body);
    font-weight: var(--fw-normal);
    color: var(--fg);
}
/* v1.199.1: et LANGT navn uden mellemrum skubbede blyant + × ud af rækken, så navnet kun kunne
   slettes — ikke rettes. Flex-item'ets default `min-width: auto` er tekstens min-content-bredde
   (= hele ordet), så spanet nægtede at krympe (gotcha #48b). `min-width: 0` bryder fælden, og
   navnet afkortes visuelt med ellipsis; det FULDE navn ligger i title/aria-label. */
.msd-unique-name-text {
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.msd-unique-name-remove {
    flex: 0 0 auto;   /* v1.199.1: må ALDRIG skubbes ud af rækken af et langt navn */
    background: transparent;
    border: none;
    color: var(--pink-strong);
    font-size: 1.2rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
}
.msd-unique-name-remove:hover { color: var(--pink-strong-hover); }

/* ── v1.198.0: hvilket navn vises på designet ──────────────────────────────────
   Klik på rækken → unik-laget viser DET navn. Den valgte række markeres med en pink ring
   (box-shadow, så den ikke ændrer rækkens højde) + en diskret "vises"-pille. */
.msd-unique-name-item.is-preview {
    background: var(--card);
    box-shadow: inset 0 0 0 2px var(--pink);
    font-weight: var(--fw-strong);
}
.msd-unique-name-shown {
    flex: 0 0 auto;
    font-size: var(--fs-label);
    font-weight: var(--fw-strong);
    color: var(--pink-strong);
    background: var(--pink-soft);
    border-radius: var(--radius-pill);
    padding: 1px 8px;
    margin-right: 4px;
}

/* ── v1.119.0 / DEL B: inline-rediger navn ─────────────────────────────────────
   Klik på BLYANTEN (v1.198.0 — rækken previewer) → input + Gem. */
.msd-unique-name-item { cursor: pointer; }
.msd-unique-name-edit {
    flex: 0 0 auto;   /* v1.199.1: må ALDRIG skubbes ud af rækken af et langt navn */
    background: transparent; border: none; color: #d3a9bd; cursor: pointer;
    padding: 0 4px; line-height: 0; display: inline-flex; align-items: center;
}
.msd-unique-name-item:hover .msd-unique-name-edit { color: var(--pink-strong); }
.msd-unique-name-item.is-editing { cursor: default; gap: 6px; }
.msd-unique-name-edit-input {
    flex: 1; min-width: 0; border: 1px solid var(--pink); border-radius: 6px;
    padding: 4px 8px; font-size: var(--fs-body); background: var(--card);
}
.msd-unique-name-edit-input:focus { outline: none; box-shadow: 0 0 0 3px var(--pink-soft); }
/* Kontekst: kun layout; udtryk = primær-rollen (radius-pill B2 + --fs-body B3 er rolle-modifiers). */
.msd-unique-name-save {
    flex: 0 0 auto; padding: 4px 12px;
}

/* ── v1.120.0 / DEL 3: "Indsæt liste" (bulk-paste) ─────────────────────────────
   Sekundær stiplet knap under listen; klik afslører et inline textarea (ikke modal). */
.msd-unique-bulk-toggle {
    display: block; width: 100%; height: var(--ctl-sm); box-sizing: border-box; margin-top: 8px;
    background: transparent; color: var(--pink-strong);
    border: 1px dashed var(--pink); border-radius: var(--radius-sm);
    padding: 7px 10px; font-size: var(--fs-body); font-weight: var(--fw-strong); cursor: pointer;
    transition: background 0.15s;
}
/* v1.122.2: ghost-knap → hoveret er nu var(--pink-soft) (før #fdf1f5 ≈ hvid, praktisk talt usynligt). */
.msd-unique-bulk-toggle:hover { background: var(--pink-soft); }
.msd-unique-bulk { margin-top: 8px; }
.msd-unique-bulk-input {
    width: 100%; box-sizing: border-box; resize: vertical;
    border: 1px solid var(--pink-border); border-radius: var(--radius-sm); padding: 8px 10px;
    font-size: var(--fs-body); font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.msd-unique-bulk-input:focus {
    outline: none; border-color: var(--pink); box-shadow: 0 0 0 3px var(--pink-soft);
}
.msd-unique-bulk-actions { display: flex; gap: 6px; margin-top: 6px; }
/* Kontekst: kun layout; udtryk = primær-rollen (radius-pill B2 + --fs-body B3 er rolle-modifiers). */
.msd-unique-bulk-add {
    flex: 1; padding: 6px 12px;
}
.msd-unique-bulk-cancel {
    flex: 0 0 auto; background: transparent; color: var(--pink-strong-hover); border: none;
    padding: 6px 12px; font-size: var(--fs-body); cursor: pointer;
}

/* ── Tilføj-element-værktøjslinje (v1.33.0) ─────────────────────────────────── */

.msd-add-tools {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.msd-add-btn {
    flex: 1;
    min-width: 100px;
    background: var(--pink-soft);
    color: var(--pink-strong);
    border: 1px solid #f0c4d4;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.msd-add-btn:hover { background: var(--pink); color: var(--on-pink); border-color: var(--pink); }

/* ── Bibliotek-vælger overlay (v1.34.2) ──────────────────────────────────── */

.msd-library-picker {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(28, 28, 30, 0.45);
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.msd-library-picker-box {
    background: var(--card);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    width: min(440px, 92vw);
    max-height: 80vh;
    overflow-y: auto;
    padding: 16px;
}
.msd-library-picker-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--pink-strong);
}
.msd-library-picker-close {
    background: none;
    border: none;
    font-size: 1.6rem;
    line-height: 1;
    color: var(--pink-strong);
    cursor: pointer;
    padding: 0 4px;
}

/* ── Slet-ikon på valgt element (v1.35.0) ────────────────────────────────── */

.msd-delete-control {
    position: fixed;
    z-index: 100000;
    width: 26px;
    height: 26px;
    padding: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: var(--card);
    color: var(--pink-strong);
    border: 1px solid var(--pink);
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    cursor: pointer;
    line-height: 0;
}
.msd-delete-control:hover { background: var(--pink); color: var(--on-pink); }

/* ── Lav-opløsnings-dialog (v1.196.0) ────────────────────────────────────────
   MÅLT i v1.195.2: advarslen stod som 12,8 px tekst i højre panels upload-status
   og blev aldrig set — kunden kigger på sit billede ude på lærredet. Dialogen
   ankres derfor VED elementet (M.placeFloatingBox, gotcha #33/#186) og lukkes af
   kunden med OK. INGEN backdrop: den blokerer hverken kurv, køb eller redigering.
   Ren DOM på <body> — aldrig canvas-indhold, så den kan ikke nå en printfil. */
.msd-lowres-dialog {
    position: fixed;
    z-index: 100001;                      /* over element-bjælken (100000) */
    display: none;                        /* flex når den vises (sættes i JS) */
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    max-width: min(320px, 92vw);
    padding: 12px 14px;
    background: var(--warning-bg);
    border: 1px solid var(--warning-border);
    border-radius: var(--radius-md);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.msd-lowres-dialog .msd-lowres-text {
    margin: 0;
    color: var(--warning-fg);
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    font-weight: var(--fw-normal);
    line-height: 1.4;
}
.msd-lowres-dialog .msd-lowres-ok {
    align-self: flex-end;
    min-height: var(--ctl-sm);
    padding: 0 18px;
}
/* Mobil: dialogen centreres (JS sætter .is-centered) og OK får det fulde touch-mål. */
@media (max-width: 640px) {
    .msd-lowres-dialog .msd-lowres-ok { min-height: var(--ctl-touch); width: 100%; align-self: stretch; }
}
.msd-lowres-dialog.is-centered { max-width: min(320px, 92vw); }

/* ── Zoom-overlay for udfyldt upload-zone (v1.94.0) ──────────────────────── */
/* Flydende −/+ under feltets nederste kant (mode-løs billed-zoom). Touch-venlige mål. */
.msd-zoom-control {
    position: fixed;
    z-index: 100000;
    display: none;
    gap: 6px;
    padding: 4px;
    background: var(--card);
    border: 1px solid var(--pink);
    border-radius: 22px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    /* v1.180.1 (iOS Safari): bjælken manglede `align-items` → default `normal`/stretch. Bliver ÉT
       element højere end de andre (på iPhone typisk fordi iOS' tekst-autozoom puster glyfferne −/+/⟲/⟳
       op), placeres de øvrige ved linjens START = knapperne i toppen med tom luft i bunden. Præcis
       det rapporterede billede. `center` gør rækken robust uanset hvad der måtte være højest, og
       ændrer INTET når alle elementer er lige høje (målt uændret i Chrome, WebKit og iPhone-emuleret
       WebKit). `line-height: 1` fjerner den arvede 25,6 px linje-højde som kilde til en høj linjeboks,
       og `text-size-adjust` slår iOS' auto-oppustning fra for netop denne bjælke. */
    align-items: center;
    line-height: 1;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
.msd-zoom-btn {
    width: 38px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card);
    color: var(--pink-strong);
    border: 1px solid var(--pink);
    border-radius: 50%;
    font-size: 20px;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}
.msd-zoom-btn:hover  { background: var(--pink); color: var(--on-pink); }
.msd-zoom-btn:active { background: var(--pink-hover); color: var(--on-pink); }

/* v1.179.0: SLET yderst til højre i elementets bjælke — visuelt ADSKILT fra − / + / rotér med
   en hårfin lodret skillelinje + ekstra luft, så man ikke rammer slet når man sigter efter en
   af de andre knapper. Papirkurven sad før på markerings-chippen oven på motivet. */
.msd-zoom-sep {
    width: 1px;
    /* v1.180.1: EGEN højde + centrering i stedet for `align-self: stretch`. Stretch bandt stregen
       til linjens højde, så den fulgte med op i toppen sammen med knapperne når linjen blev højere
       end knappen — og skjulte samtidig at linjen var for høj. Nu er den altid lige høj som en
       knap-kerne og lodret centreret, uanset linjens højde. */
    height: 20px;
    align-self: center;
    margin: 0 2px;
    background: var(--border);
    flex: 0 0 auto;
}
/* v2.19.0: "Flyt ramme" er en TILSTAND, ikke en handling — den aktive knap skal derfor se
   trykket ud så længe tilstanden gælder (samme pink-fyld som en aktiv pille andre steder). */
.msd-zoom-control .msd-move-btn.is-active,
.msd-zoom-control .msd-move-btn.is-active:hover {
    background: var(--pink); border-color: var(--pink); color: var(--on-pink);
}
.msd-zoom-control .msd-del-btn { margin-left: 4px; }
.msd-zoom-control .msd-del-btn:hover,
.msd-zoom-control .msd-del-btn:active { background: var(--danger); border-color: var(--danger); color: var(--on-pink); }

/* ── Actions ─────────────────────────────────────────────────────────────── */

/* .msd-btn-save-udtryk = SEKUNDÆR-rollen; layout (padding/bredde) sættes af #msd-actions-
   kontekstreglerne (panel/pagebar) længere nede — ingen base-padding her (den vandt aldrig). */
.msd-login-notice { font-size: 0.9rem; color: #888; margin: 0; }

/* v1.243.0: "Centrér i felt"-gruppen (⊕ ↔ ↕) er fjernet — centreringen bor i handlingsrækken (.msd-act-row). */
.msd-login-notice a { color: var(--pink-strong); text-decoration: underline; }

/* "Download PDF"-knappen (.msde-btn-download, defineret i myspecialday-export/assets/css/export.css
   med #2271b1 blå) er et SEKUNDÆR-rolle-medlem — ROLLE-REGISTER bærer pink-soft-udtrykket + !important
   som tema-værn mod export.css' blå. Padding sættes af #msd-actions-kontekstreglerne (den gamle
   base-padding her vandt aldrig og er fjernet). */

/* ── Responsivt ──────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
    body.msd-designer-active div.product { flex-direction: column; }
    body.msd-designer-active .msd-canvas-wrap {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .msd-designer-wrap { padding: 8px; gap: 8px; }
}

/* ── Saved designs — Min konto ───────────────────────────────────────────── */

.msd-saved-designs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px; margin-top: 20px;
}
.msd-saved-design-card {
    border: 1px solid var(--pink-border);
    border-radius: 12px; overflow: hidden;
}
.msd-saved-design-card img { width: 100%; height: 140px; object-fit: cover; display: block; }
.msd-no-thumbnail {
    width: 100%; height: 140px; background: var(--pink-soft);
    display: flex; align-items: center; justify-content: center; color: var(--pink);
}
.msd-saved-design-info { padding: 10px; }
.msd-saved-design-info strong { display: block; font-size: 0.95rem; }
.msd-saved-design-info span { display: block; font-size: 0.85rem; color: #666; }
.msd-saved-design-info time { display: block; font-size: 0.8rem; color: #999; margin-top: 2px; }
.msd-saved-design-actions {
    padding: 8px 10px; border-top: 1px solid var(--pink-soft); display: flex; gap: 8px;
}

/* ── Fase 4 (v1.71.0): Højre panel — to tilstande ─────────────────────────────
   A "Dit produkt" (intet valgt, DEFAULT): tilvalg + Gem/Download + antal/Læg-i-kurv.
   B "Rediger element" (element valgt): det eksisterende edit-panel + tilbage-link.
   Skift styres af klassen .is-editing på .msd-region-right (sat af det additive
   msd:selection-changed-signal). GENBRUGER alle eksisterende kontroller/WC-form;
   ingen ny købs-/redigerings-logik — kun visning. */

/* Summary som lodret flow. v1.120.0 / DEL 1: KØB-BLOKKEN (pris + antal-linje/stepper + "Læg i kurv")
   står ØVERST — over Navneliste/tilvalg (.msd-designer-wrap) — så CTA'en altid er synlig uden scroll.
   Ren visuel omordning via flex `order`; form.cart's DOM/submit/hidden-felter er URØRT. Gælder desktop-
   panel OG mobil-bottom-sheet (samme .msd-summary). Tynd divider under køb-blokken. */
.msd-editor-shell .msd-summary { display: flex; flex-direction: column; }
.msd-editor-shell .msd-summary .product_title { order: 0; }
.msd-editor-shell .msd-summary .price { order: 1; margin: 4px 0 0; font-weight: var(--fw-strong); color: var(--fg); }
.msd-editor-shell .msd-summary form.cart {
    order: 2; border-bottom: 1px solid var(--border); padding-bottom: 14px; margin-bottom: 4px;
}
.msd-editor-shell .msd-summary .msd-designer-wrap { order: 3; }

/* "Klik på et element"-placeholder er afløst af produkt-tilstanden — skjul altid. */
.msd-region-right #msd-no-selection { display: none !important; }

/* Tilstand A (default): skjul den (tomme) edit-sidebar; produkt-stuff vises. */
.msd-region-right:not(.is-editing) #msd-sidebar { display: none; }

/* Tilstand B (element valgt): skjul produkt-stuff. Edit-panelet vises via den
   eksisterende inline-display (#msd-layer-controls), som vi IKKE rører. */
.msd-region-right.is-editing .product_title,
.msd-region-right.is-editing .price,
.msd-region-right.is-editing form.cart,
.msd-region-right.is-editing #msd-options,
.msd-region-right.is-editing #msd-actions { display: none !important; }

/* Tilbage-til-produkt-link (kun synligt i tilstand B, øverst i edit-panelet). */
.msd-back-link {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: none; padding: 0 0 10px;
    color: var(--pink-strong); font-family: var(--font-ui);
    font-size: 0.85rem; font-weight: 600; cursor: pointer;
}
.msd-back-link:hover { color: var(--pink); }

/* Tilvalg-dropdowns (Dit produkt): muted labels; felt-udtryk = FELT-rollen. */
.msd-region-right .msd-option-label { color: var(--muted-fg); font-family: var(--font-ui); }

/* Panel-placering (ÉN regel): Gem/Hent/Download som fuld-bredde lodret stak. Knap-udtryk =
   SEKUNDÆR-rollen; knap-bredde/padding sættes af knap-kontekstreglen længere nede (tema-værn). */
.msd-region-right #msd-actions { display: flex; flex-direction: column; gap: 9px; margin: 14px 0 0; }

/* Købs-blok bund-række: antal-stepper (venstre) + "Læg i kurv" (højre) på samme række.
   GENBRUGER WC's .quantity-input + .single_add_to_cart_button (name/value/submit urørt). */
.msd-editor-shell .msd-region-right form.cart {
    display: flex; flex-wrap: nowrap; align-items: stretch; gap: 9px; margin: 12px 0 0;
}
/* (antal-stepper .quantity/.qty defineres samlet i stepper-blokken længere nede.) */
/* CTA-kontekst (ÉN regel; udtryk fyld/tekst/radius/vægt/fs/hover = PRIMÆR-rollen).
   padding/line-height beholder !important som tema-værn (slår WooCommerce/temaets .button-padding).
   B8: letter-spacing 0.01em bevidst udeladt (rollen holdes minimal; pp-cta har den ikke). */
.msd-editor-shell .msd-region-right form.cart .single_add_to_cart_button {
    flex: 1 1 auto; min-width: 0; margin: 0;
    /* v1.136.4: padding 16→12 (tema-værn !important) → CTA får plads til fuld label "Læg i kurv · <pris>"
       på 1 linje ved 280px panel, efter at temaets dobbelt-stepper er skjult (del A). */
    padding: 11px 12px !important; line-height: 1.2 !important; /* tema-værn: slår temaets .button-padding */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* 1 linje; ellipsis ved ekstra lange priser */
}

/* ── Fase 8 (v1.75.0): visuel finpudsning af købs-blokken (tilstand A) ─────────
   KUN styling — WC-form/submit/priser/JS uændret. Gælder BÅDE desktop og mobil
   bottom sheet (samme .msd-region-right-selektor). */

/* Sektionsoverskrift "Dit produkt" (muted caps) over tilvalg/køb. Via ::before for
   ikke at røre markup; skjult i tilstand B (rediger element). */
.msd-region-right #msd-designer-wrap::before {
    content: "Dit produkt";
    display: block;
    font-family: var(--font-ui);
    font-size: var(--fs-label); font-weight: var(--fw-strong); letter-spacing: 0.06em;
    text-transform: uppercase; color: var(--muted-fg);
    margin: 0 0 12px;
}
.msd-region-right.is-editing #msd-designer-wrap::before { display: none; }

/* Ensartet feltafstand/ro i panelet. (#msd-actions gap/margin sat i panel-placeringsreglen ovenfor.) */
.msd-region-right #msd-options { margin-bottom: 16px; }

/* ── Fase 9 (v1.75.1): farveflader i højre panel (tilstand A) — match mockup ───
   Hvid panel-flade + lysegrå UDFYLDTE felter (omvendt af før, hvor blokken lå i et
   gråt kort med hvide felter). KUN CSS, scoped til editor-skallens højre panel i
   tilstand A; tilstand B + alt andet er upåvirket. Gælder desktop + mobil sheet. */

/* 1) Fjern den grå kort-flade rundt om "Dit produkt"-gruppen → hvid panel-flade. */
.msd-editor-shell .msd-region-right:not(.is-editing) .msd-designer-wrap {
    background: transparent;
    padding: 0;
    border-radius: 0;
}

/* 2) Felt-fyld (tilvalg-selects + WC-variation-selects) = FELT-rollen; qty er borderless
   stepper-midte (egen Fase 11-regel), IKKE et felt-rolle-medlem. */

/* Tilvalg (ÉN regel pr. element): label over felt, select i fuld bredde. Udtryk (fill/border/
   radius/fs/fokus) = FELT-rollen; her kun layout. Ingen !important (rollen slår tema via kildeorden). */
.msd-region-right .msd-option-group {
    display: flex; flex-direction: column; align-items: stretch;
    gap: 5px; margin-bottom: 14px;
}
.msd-region-right .msd-option-label { font-size: var(--fs-label); font-weight: var(--fw-normal); color: var(--muted-fg); }
.msd-region-right .msd-option-select { max-width: none; width: 100%; padding: 9px 10px; height: var(--ctl-lg); box-sizing: border-box; }

/* 1b) WC-variations (variable produkter): tving to-kolonne-tabellen til stablet form. */
.msd-region-right table.variations,
.msd-region-right table.variations tbody,
.msd-region-right table.variations tr,
.msd-region-right table.variations th,
.msd-region-right table.variations td { display: block; width: auto; }
.msd-region-right table.variations { border: 0; margin: 0 0 14px; }
.msd-region-right table.variations tr { margin-bottom: 14px; }
.msd-region-right table.variations th.label {
    padding: 0 0 6px; font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--muted-fg); text-align: left;
}
.msd-region-right table.variations td.value { padding: 0; }
.msd-region-right table.variations td.value select { width: 100%; }
.msd-region-right .woocommerce-variation-add-to-cart {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px;
}
.msd-region-right .woocommerce-variation-add-to-cart .quantity { flex: 0 0 auto; }
.msd-region-right .woocommerce-variation-add-to-cart .single_add_to_cart_button { flex: 1 1 auto; }

/* 2d) Pris-linje: diskret lige over kurv-rækken. Simple produkter viser prisen PÅ
   knappen (body.msd-price-on-cta) → skjul den løsrevne linje; variable beholder den. */
.msd-region-right .price { font-size: var(--fs-base); font-weight: var(--fw-strong); color: var(--muted-fg); margin: 0 0 8px; }
body.msd-price-on-cta .msd-region-right .price { display: none; }

/* ── Fase 5 (v1.72.0): Footer-bundbar — sidefaner (venstre) + zoom-placeholder (højre) ──
   Side-skiftet er konsolideret hertil (erstatter den gamle under-canvas-vælger). GENBRUGER
   F.switchToPage. Zoom er en deaktiveret placeholder (ingen kunde-zoom på frontend endnu). */
.msd-editor-shell .msd-region-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 0 16px; font-family: var(--font-ui);
    background: var(--card); border-top: 1px solid var(--border);
    overflow-x: auto;
}
.msd-footer-pages { display: flex; align-items: center; gap: 6px; min-width: 0; }
.msd-footer-page {
    /* v1.127.0 / DEL A: inaktiv chip i temaets sprog (ghost-familien: pink-strong tekst,
       pink-border kant); aktiv chip + radius (--radius-pill) uaendret. */
    border: 1px solid var(--pink-border); background: var(--card); color: var(--pink-strong);
    font-family: var(--font-ui); font-size: var(--fs-body); font-weight: var(--fw-normal);
    height: var(--ctl-sm); box-sizing: border-box;
    padding: 6px 14px; border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap;
    /* v1.140.3: geometrisk centrering (før: line-height-afhængig → skæv på Flatsome). */
    display: inline-flex; align-items: center; justify-content: center;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.msd-footer-page:hover { background: var(--pink-soft); }
.msd-footer-page.is-active {
    background: var(--pink-soft); color: var(--pink-strong); border-color: var(--pink);
}
.msd-footer-zoom { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.msd-zoom-btn {
    width: 28px; height: 28px; border: 1px solid var(--border); background: var(--card);
    color: var(--fg); border-radius: 8px; font-size: 1rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
    transition: background 0.15s;
}
.msd-zoom-btn:hover:not(:disabled) { background: var(--pink-soft); color: var(--pink-strong); border-color: var(--pink); }
.msd-zoom-btn:disabled { opacity: 0.5; cursor: default; }
.msd-zoom-level { font-size: 0.8rem; color: var(--muted-fg); min-width: 40px; text-align: center; }

/* ── Fase 6 (v1.73.0): ægte WC-produktindhold UNDER fuldskærms-editoren ───────
   Scrollbart, SEO-venligt (faktisk DOM): beskrivelse/faner/anmeldelser + relaterede.
   Enkel ren styling med tokens; max-bredde-centreret container. */
.msd-product-content {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-ui);
    padding: 48px 20px 72px;
}
.msd-product-content-inner { max-width: 980px; margin: 0 auto; }
.msd-product-content img { max-width: 100%; height: auto; }
.msd-product-content h2,
.msd-product-content h3 { font-family: var(--font-display); font-weight: 600; color: var(--fg); }
.msd-product-content a { color: var(--pink-strong); }

/* WC-faner — enkel pille-stil med tokens. */
.msd-product-content .woocommerce-tabs ul.tabs {
    list-style: none; margin: 0 0 24px; padding: 0;
    display: flex; flex-wrap: wrap; gap: 8px; border-bottom: 1px solid var(--border);
}
.msd-product-content .woocommerce-tabs ul.tabs li { margin: 0; }
.msd-product-content .woocommerce-tabs ul.tabs li a {
    display: inline-block; padding: 10px 18px; border-radius: 14px 14px 0 0;
    color: var(--muted-fg); text-decoration: none; font-weight: 600; font-size: 0.95rem;
    transition: color 0.15s, background 0.15s;
}
.msd-product-content .woocommerce-tabs ul.tabs li a:hover { color: var(--pink-strong); }
.msd-product-content .woocommerce-tabs ul.tabs li.active a {
    color: var(--pink-strong); background: var(--card);
    border: 1px solid var(--border); border-bottom-color: var(--card); margin-bottom: -1px;
}
.msd-product-content .woocommerce-Tabs-panel { line-height: 1.65; }
.msd-product-content .woocommerce-Tabs-panel > h2:first-child { margin-top: 0; }
.msd-product-content .related.products,
.msd-product-content .upsells.products { margin-top: 56px; }
.msd-product-content .related.products > h2,
.msd-product-content .upsells.products > h2 { margin-bottom: 20px; }

/* ── Fase 11 (v1.76.0): præcis 1:1-tilpasning til mockup (knap-/font-/felt-størrelser) ──
   Matcher højre panels købs-blok (tilstand A) til msd-editor-variant1-pink mockup'en.
   KUN visning; senere regel → vinder over Fase 8-10's tilnærmede værdier. Desktop + mobil. */

/* Sektionsoverskrift "Dit produkt" (mockup: 12px/600/.6px). */
.msd-region-right #msd-designer-wrap::before {
    font-size: var(--fs-label); font-weight: var(--fw-strong); letter-spacing: .6px; margin: 0 0 12px;
}

/* WC-variation-selects (variable produkter): samme felt-layout som tilvalg-selects (udtryk = FELT-rollen). */
.msd-editor-shell .msd-region-right form.cart select {
    padding: 9px 10px; height: var(--ctl-lg); box-sizing: border-box;
}

/* Gem + Download (panel-kontekst): fuld kolonne-bredde + padding 11.
   width/box-sizing/margin/padding !important = tema-værn: slår temaets .button-padding OG
   Download-knappens arvede margin-left:8px fra tema/.button (v1.77.1-flugt). */
.msd-region-right #msd-actions .msd-btn-save,
.msd-region-right #msd-actions .msd-btn-share,
.msd-region-right #msd-actions .msde-btn-download {
    padding: 11px !important;
    width: 100% !important; box-sizing: border-box !important; margin: 0 !important;
}

/* "Hent mit design" ghost-knap (link, panel-kontekst): link kræver display:block + center +
   ingen underlining. width/box-sizing/margin/padding !important = tema-værn (som ovenfor). */
.msd-region-right #msd-actions .msd-btn-fetch,
.msd-region-right #msd-actions .msd-btn-admin {
    display: block; width: 100% !important; box-sizing: border-box !important; margin: 0 !important;
    text-align: center; text-decoration: none;
    padding: 11px !important;
}

/* v1.143.1: gæste-tilstandens "låst"-styling + hover-tooltip på Gem/Hent er FJERNET — gæst-knappen
   ser ud/føles nu som en normal klikbar knap (arver .msd-btn-save/.msd-btn-fetch's sekundær-rolle
   + normal hover). Stop-cursor/grayscale/tooltip signalerede fejlagtigt "kan ikke klikke", men klik
   VIRKER (viser login/opret-besked). JS sætter ikke længere .is-locked/data-tip. (Var v1.85.0/v1.85.1.)
   Klik-beskeden bevares: */
/* v1.85.0: minimal inline-besked ved knapperne (login-gating / gem-fejl). */
#msd-actions .msd-action-notice {
    display: none; margin-top: 6px; font-family: var(--font-ui); font-size: var(--fs-label); color: var(--muted-fg);
}
#msd-actions .msd-action-notice.is-error { color: var(--danger); }

/* Antal-stepper (− [n] +): SMAL bordered pille (~70px), så CTA får plads til 1 linje.
   ÉN regel pr. del (flettet Fase 4/8/11). Ingen !important — ingen tema-værn nødvendig. */
.msd-editor-shell .msd-region-right form.cart .quantity {
    display: flex; align-items: stretch; flex: 0 0 auto; margin: 0;
    /* v1.136.9: !important = tema-værn. Stepper-rammen skal ALTID vises, også når Flatsome lægger
       `ux-quantity` på samme element (jf. wrapper-neutraliseringen ovenfor). */
    border: 1px solid var(--border) !important; border-radius: var(--radius-md) !important;
    overflow: hidden; background: var(--card) !important;
}
.msd-region-right form.cart .msd-qty-btn {
    width: 20px; height: 38px; border: none; background: var(--card); color: var(--fg);
    font-size: 15px; line-height: 1; cursor: pointer; font-family: var(--font-ui);
    /* v1.136.8 (tema-værn): NULSTIL padding+margin. Vores −/+ er <button> → Flatsome giver dem
       globalt `padding: 0 18px` + `margin: 0 15px 15px 0` (som gotcha #53's transform/vægt) →
       hver knap blev 36px + 15px margin → stepper 128px (mod ~66px), pris tvunget på fallback-linjen.
       Live-verificeret: reset → stepper 66px, tocifret pris tilbage PÅ CTA. !important = tema-værn. */
    padding: 0 !important; margin: 0 !important; box-sizing: border-box;
}
.msd-region-right form.cart .msd-qty-btn:hover { background: var(--muted); }
.msd-editor-shell .msd-region-right form.cart .qty {
    width: 26px; min-height: 0; padding: 0; border-radius: 0;
    border: none; border-left: 1px solid var(--border); border-right: 1px solid var(--border);
    background: var(--card); font-family: var(--font-ui); color: var(--fg);
    font-size: var(--fs-base); font-weight: var(--fw-strong); text-align: center;
    -moz-appearance: textfield; appearance: textfield;
}
.msd-region-right form.cart .qty::-webkit-outer-spin-button,
.msd-region-right form.cart .qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* border-color:var(--pink) bevaret bevidst: tinter venstre/hoejre kant paa fokus (ligner ellers en rest);
   box-shadow:none = stepper-midten har ingen fokus-ring (borderless). */
.msd-editor-shell .msd-region-right form.cart .qty:focus { outline: none; border-color: var(--pink); box-shadow: none; }

/* ════════════════════════════════════════════════════════════════════════════
   TEMA-VÆRN del 2 — Flatsome-elementer i editor-købspanelet (v1.136.4). Verificeret
   live (Flatsome 3.18.4). Alt scoped til body.msd-editor-fullscreen → normal produktside
   (body.msd-product-page) er UBERØRT. Se gotcha #48/#52/#53.

   (A) DOBBELT QTY-STEPPER: Flatsome injicerer egne −/+ i .quantity (input.minus/.plus,
   a.minus/.plus, .qty-minus/.qty-plus m.fl.) → "− − 1 + +" sammen med vores .msd-qty-btn.
   Whitelist (gotcha #52-princip, klassenavn-uafhængigt): i .quantity må KUN selve tal-
   inputtet (input.qty) + vores .msd-qty-btn være synlige; ALT andet skjules. */
/* v1.136.6/v1.136.7: nesting-robust whitelist. Skjul ALT inde i quantity-KONTROLLEN (`.quantity`
   OG Flatsomes wrapper `.ux-quantity`) der ikke er tal-inputtet, vores −/+, en a11y-label, ELLER en
   wrapper der INDEHOLDER tal-inputtet (`:has(input.qty)` beskytter den indre `.quantity`).
   v1.136.7-FIX: Flatsome lægger sine egne stepper-knapper (`.ux-quantity__button`) i `.ux-quantity`
   MEN UDEN FOR den indre `.quantity` → v1.136.6's `.quantity *`-whitelist ramte dem aldrig (~2×29px
   ekstra bredde → stepper 128px i stedet for ~70px, pris tvunget på fallback-linjen). Nu dækker vi
   BEGGE containere. Klassenavn-uafhængigt. */
body.msd-editor-fullscreen .msd-region-right form.cart .quantity *:not(input.qty):not(.msd-qty-btn):not(label):not(:has(input.qty)),
body.msd-editor-fullscreen .msd-region-right form.cart .ux-quantity *:not(input.qty):not(.msd-qty-btn):not(label):not(:has(input.qty)) {
    display: none !important;
}

/* (C) BREADCRUMB + tema-DIVIDER: Flatsome renderer i produkt-summary en brødkrumme
   ("FORSIDE / UKATEGORISERET") OG en dekorativ `.is-divider`-streg lige under produkttitlen —
   begge ender i editorens højre panel (dividerens streg så ud som om den hørte til produktnavnet).
   Skjul dem KUN i editor-panelet — normal produktside uberørt. (v1.136.9: + .is-divider.) */
body.msd-editor-fullscreen .msd-region-right .breadcrumbs,
body.msd-editor-fullscreen .msd-region-right nav.woocommerce-breadcrumb,
body.msd-editor-fullscreen .msd-region-right .woocommerce-breadcrumb,
body.msd-editor-fullscreen .msd-region-right .is-divider {
    display: none !important;
}

/* (B/v1.136.5) Flatsome WRAPPER om .quantity: `div.ux-quantity` fylder ~130px via egen
   min-width/padding → CTA klemmes til "L…". Neutralisér ENHVER tema-wrapper om .quantity i
   editor-scope (klassenavn-uafhængigt via :has + eksplicit .ux-quantity): boks-styling nulstillet
   + bredde = indhold (vores kompakte stepper), så wrapperen aldrig kan sætte egen bredde. */
body.msd-editor-fullscreen .msd-region-right form.cart .ux-quantity,
body.msd-editor-fullscreen .msd-region-right form.cart > *:has(> .quantity) {
    /* v1.136.9: KUN de breddesættende tema-props nulstilles. border/background/box-shadow blev
       tidligere også strippet — men når Flatsome lægger `ux-quantity` PÅ selve `.quantity` (samme
       element) fjernede `border:none` vores egen stepper-ramme. Rammen ejes nu af .quantity-reglen. */
    flex: 0 0 auto !important;
    width: auto !important; min-width: 0 !important; max-width: none !important;
    padding: 0 !important; margin: 0 !important;
}

/* (B) Fallback-pris-linje: når fuld "Læg i kurv · <pris>" ikke kan være på knappen (lange priser
   ved 280px), sætter JS (updateCtaTotal) CTA = "Læg i kurv" og viser prisen diskret her over
   købs-rækken (hellere fuld tekst end afkortet knap). Skjult indtil JS aktiverer den. */
.msd-editor-shell .msd-summary .msd-cta-price {
    order: 1; margin: 6px 0 0; font-size: var(--fs-base); font-weight: var(--fw-strong); color: var(--fg);
    font-family: var(--font-ui);
}

/* ── v1.77.0: "Tekst valgt"-markerings-pille (matcher mockup .tag) ─────────────
   Projiceret overlay (gotcha #33) placeret lige over det valgte elements top. */
.msd-sel-label {
    position: fixed; z-index: 10001; pointer-events: none;
    background: var(--pink); color: var(--on-pink);
    font-family: var(--font-ui); font-size: 10px; font-weight: 600;
    line-height: 1.4; padding: 2px 8px; border-radius: 5px; white-space: nowrap;
    box-shadow: 0 1px 4px rgba(0,0,0,.18);
}

/* ── v1.163.0: "Del design"-dialogens link-felt ─────────────────────────────── */
.msd-share-url {
    width: 100%; box-sizing: border-box; margin: 0 0 10px; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 8px; background: var(--bg);
    color: var(--fg); font-family: var(--font-ui); font-size: 13px;
}
.msd-share-copied { color: var(--pink-strong, #c14878); font-weight: 600; }

/* ── v1.163.0: SKRIVEBESKYTTET del-visning (?msd_share=) ─────────────────────── */
body.msd-share-view { background: var(--bg, #f7f7f9); margin: 0; }
.msd-share-shell {
    max-width: 720px; margin: 0 auto; padding: 24px 16px 48px;
    font-family: var(--font-ui); color: var(--fg);
}
.msd-share-head { text-align: center; margin-bottom: 20px; }
.msd-share-eyebrow {
    margin: 0 0 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
    color: var(--muted-fg); font-weight: 600;
}
.msd-share-title { margin: 0 0 6px; font-size: 22px; font-weight: 700; color: var(--pink-strong, #c14878); }
.msd-share-note  { margin: 0; font-size: 13px; color: var(--muted-fg); }
.msd-share-status { text-align: center; font-size: 14px; color: var(--muted-fg); padding: 24px 0; }
.msd-share-status.msd-share-err { color: #c0392b; }
.msd-share-pages { display: flex; flex-direction: column; gap: 24px; align-items: center; }
/* v1.59.0: kortet følger billedet (før: kæmpe hvidt kvadrat med en lille trøje i). */
.msd-share-page {
    margin: 0; width: min(560px, 100%);
    background: var(--card, #fff); border-radius: 14px; overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
}
.msd-share-page img { display: block; width: 100%; height: auto; }
.msd-share-page figcaption {
    text-align: center; padding: 10px 12px 12px;
    font-size: 13px; font-weight: 600; color: var(--fg-soft, #555);
    border-top: 1px solid var(--border, #ececef);
}
.msd-share-page img {
    display: block; width: 100%; height: auto; border-radius: 10px;
    background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.12);
}
.msd-share-page figcaption {
    margin-top: 6px; text-align: center; font-size: 12px; color: var(--muted-fg);
}
.msd-share-foot { margin-top: 32px; text-align: center; font-size: 12px; color: var(--muted-fg); }

/* ── v1.161.0: safe-zone-advarslens punktliste (i finalize-dialogens skal) ──── */
.msd-safe-list {
    margin: 0 0 12px; padding: 0 0 0 18px; list-style: disc;
    font-family: var(--font-ui); font-size: var(--fs-body); color: var(--fg); line-height: 1.5;
    max-height: 42vh; overflow-y: auto;
}
.msd-safe-list li { margin: 0 0 4px; }

/* v1.100.0: auto-forslagets miniature — ternet grund, så en (kommende) gennemsigtighed kan ses. */
.msd-bgsuggest-thumb {
    display: block; max-width: 180px; max-height: 140px; margin: 0 auto 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
}
.msd-safe-more { margin-top: -6px; color: var(--muted-fg); }

/* ── v1.159.0: multi-markeringens justér-linje (kun desktop-gester kan skabe den) ──
   Projiceret overlay (gotcha #33) under markeringens samlede ramme. Rene tema-tokens. */
.msd-align-bar {
    position: fixed; z-index: 10002; display: none; align-items: center; gap: 2px;
    padding: 4px 8px; border-radius: 12px;
    background: var(--card); border: 1px solid var(--border);
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    font-family: var(--font-ui); white-space: nowrap; user-select: none;
}
.msd-align-count { color: var(--muted-fg); font-size: 11px; font-weight: 500; padding: 0 4px 0 2px; }
.msd-align-sep   { width: 1px; height: 20px; background: var(--border); margin: 0 3px; }
.msd-align-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 28px; padding: 0; border: none; border-radius: 6px;
    background: none; color: var(--fg); cursor: pointer;
}
.msd-align-btn:hover  { background: var(--bg); }
.msd-align-btn:active { background: var(--pink); color: var(--on-pink); }

/* ── v1.80.0: Kunde-lag-panel (overlay; genbruger .msd-library-picker-skal) ──── */
/* v1.143.0: lag-panel-redesign — fritsvævende, draggable boks (mockup).
   Layout pr. række: [type-ikon][navn flex:1 ellipsis][4 knapper]. Ikke længere modal-overlay. */
.msd-layers-panel {
    position: fixed; left: 96px; top: 96px; z-index: 100001;
    width: 260px; max-width: calc(100vw - 24px);
    background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.18); font-family: var(--font-ui);
    display: flex; flex-direction: column; overflow: hidden;
}
.msd-layers-header {
    display: flex; align-items: center; gap: 6px; padding: 8px 10px;
    background: var(--bg); border-bottom: 1px solid var(--border);
    cursor: move; touch-action: none; user-select: none;
}
.msd-layers-grip { display: inline-flex; color: var(--muted-fg); }
.msd-layers-grip svg { flex: 0 0 auto; }
.msd-layers-title { flex: 1 1 auto; font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--fg); }
.msd-layers-close {
    flex: 0 0 auto; width: 24px; height: 24px; border: none; background: none;
    color: var(--muted-fg); cursor: pointer; font-size: 18px; line-height: 1; border-radius: var(--radius-sm);
}
.msd-layers-close:hover { color: var(--pink-strong); background: var(--pink-soft); }

.msd-layers-list { padding: 6px; max-height: 60vh; overflow-y: auto; }
.msd-layer-row {
    display: flex; align-items: center; gap: 3px;
    padding: 4px 6px; border-radius: 8px; border: 1px solid transparent;
    background: var(--card); margin-bottom: 3px; min-height: 30px; box-sizing: border-box;
    cursor: pointer;
}
.msd-layer-row:hover { background: var(--bg); }
.msd-layer-row.is-selected { background: var(--pink-soft); border-color: var(--pink-border); }
.msd-layer-row.is-hidden { opacity: 0.5; }
.msd-layer-type { flex: 0 0 auto; display: inline-flex; color: var(--muted-fg); margin-right: 2px; }
.msd-layer-type svg { flex: 0 0 auto; }
.msd-layer-name {
    flex: 1 1 auto; min-width: 0; font-size: var(--fs-body); color: var(--fg);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msd-layer-btn {
    flex: 0 0 auto; width: 22px; height: 22px; display: inline-flex;
    align-items: center; justify-content: center; padding: 0; margin: 0;
    border: none; background: none;
    color: var(--fg); cursor: pointer; border-radius: var(--radius-sm);
    transition: background .12s, color .12s;
}
.msd-layer-btn svg { flex: 0 0 auto; }
.msd-layer-btn:hover:not(:disabled) { background: var(--pink-soft); color: var(--pink-strong); }
.msd-layer-btn:disabled { opacity: 0.3; cursor: default; }
/* Semantiske tilstands-farver (mockup): skjult = danger, låst = warning. */
.msd-layer-btn.is-hidden-state { color: var(--danger); }
.msd-layer-btn.is-locked-state { color: var(--warning-fg); }

/* v1.80.1: "Lagt i kurv — Se kurv"-bekræftelse (AJAX add-to-cart, ingen reload). */
.msd-cart-added { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-family: var(--font-ui); font-size: 0.9rem; }
.msd-cart-added-msg { color: var(--green); font-weight: 600; }
.msd-cart-added-link { color: var(--pink-strong); font-weight: 600; text-decoration: underline; }

/* v1.80.4: skjul WC's native "View cart"-link (a.added_to_cart) i editorens højre panel —
   kurv-broen viser sin egen "✓ Lagt i kurv — Se kurv". Uden dette klemmes CTA-knappen i
   flex-rækken til en afkortet firkant. Gælder desktop + mobil bottom-sheet. */
.msd-region-right a.added_to_cart,
.msd-region-right form.cart a.added_to_cart { display: none !important; }

/* ── v1.119.0 / DEL A: unik-produkt-købsblok ──────────────────────────────────
   Sat KUN når cart-bridge har markeret form.cart.msd-unique-buy (design med unik-felt).
   Skjuler hele qty-kontrollen, viser én antal-linje, CTA fuld bredde på egen række.
   Scoped til købs-rækken (.msd-region-right form.cart) → gælder ogsaa mobil-bottom-sheet.
   Ikke-unik-produkter (uden klassen) er 100% uændrede. */
.msd-editor-shell .msd-region-right form.cart.msd-unique-buy {
    flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: 6px;
}
.msd-editor-shell .msd-region-right form.cart.msd-unique-buy .quantity { display: none; }
.msd-editor-shell .msd-region-right form.cart.msd-unique-buy .msd-unique-buy-count {
    font-family: var(--font-ui); font-size: var(--fs-label); font-weight: var(--fw-normal); color: var(--muted-fg);
    text-align: center; line-height: 1.3; padding: 0;
}
.msd-editor-shell .msd-region-right form.cart.msd-unique-buy .single_add_to_cart_button {
    flex: 0 0 auto; width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* v1.143.0: (afløser v1.81.0's 6-knap-sizing) — 4 kompakte knapper, halv-størrelse hit-område.
   Højere specificity end basis-reglen ovenfor, så den bevidst sætter den endelige størrelse. */
.msd-layers-list .msd-layer-btn { width: 22px; height: 22px; flex: 0 0 auto; }

/* v1.86.1: "Mine designs" (Min Konto) — designer-stil kort-grid. v1.127.0: den selvstændige
   token-redeklaration er FJERNET (redundant efter :root-hejsningen v1.123.0 — samme værdier
   arves nu globalt fra det kanoniske block; verificeret at ingen regel afhang af scopet). */
.msd-account-designs {
    font-family: var(--font-ui); color: var(--fg);
}
.msd-account-designs .msd-saved-designs-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin: 8px 0 4px;
}
.msd-account-designs .msd-saved-design-card {
    display: flex; flex-direction: column; background: var(--card);
    border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,.06); transition: box-shadow .15s, transform .15s;
}
.msd-account-designs .msd-saved-design-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.12); transform: translateY(-2px); }
/* Preview-boks: fast aspect, contain (hele invitationen synlig), lys baggrund.
   v1.86.2: browser-robust centrering (Safari toppede billedet ved aspect-ratio-only) — min-height
   + flex-centrering + overflow:hidden; img margin:auto + display:block som ekstra fallback. */
.msd-account-designs .msd-saved-design-thumb {
    aspect-ratio: 4 / 3; min-height: 150px; background: var(--bg);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
    border-bottom: 1px solid var(--border); padding: 10px; box-sizing: border-box;
}
.msd-account-designs .msd-saved-design-thumb img {
    max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
    display: block; margin: auto; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
/* Stylet placeholder — IDENTISK boks/centrering som preview-tilstand. */
.msd-account-designs .msd-no-thumbnail {
    width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
    margin: auto; box-sizing: border-box;
    border: 1.5px dashed var(--border); border-radius: 8px; color: var(--muted-fg);
    font-size: 12px; text-align: center; background: var(--card);
}
.msd-account-designs .msd-saved-design-info {
    display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 8px;
}
.msd-account-designs .msd-saved-design-info strong { font-size: 14px; font-weight: 600; color: var(--fg); }
.msd-account-designs .msd-saved-design-info span,
.msd-account-designs .msd-saved-design-info time { font-size: 12px; color: var(--muted-fg); }
/* Actions i designer-stil. v1.86.2: 3 ENS kolonner (samme højde/bredde, justeret) i stedet for
   flex-wrap (der gav Åbn+Omdøb på række 1 og Slet fuld-bredde på række 2). */
.msd-account-designs .msd-saved-design-actions {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0 14px 14px; margin-top: auto;
}
.msd-account-designs .msd-acc-btn {
    width: 100%; box-sizing: border-box; min-height: 36px;
    display: inline-flex; align-items: center; justify-content: center;
    text-align: center; border-radius: 10px; padding: 8px 10px;
    font-family: var(--font-ui); font-size: 13px; font-weight: 600; cursor: pointer;
    text-decoration: none; line-height: 1.2; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s;
}
.msd-account-designs .msd-acc-primary { background: var(--pink-strong); color: var(--on-pink); border-color: var(--pink-strong); }
.msd-account-designs .msd-acc-primary:hover { background: #a83c66; border-color: #a83c66; color: var(--on-pink); }
.msd-account-designs .msd-acc-ghost { background: var(--pink-soft); color: var(--pink-strong); border-color: var(--border); }
.msd-account-designs .msd-acc-ghost:hover { background: #f3d2e0; color: var(--pink-strong); }
@media (max-width: 600px) {
    .msd-account-designs .msd-saved-designs-grid { grid-template-columns: 1fr; }
}

/* ── v2.16.0: SKRIFTSTØRRELSE — tre veje til samme værdi (−/+, slider, tast) ──
   Ligger i .msd-region-right (Rediger element) og følger med chippen "Størrelse" til
   mobil-bjælken. Tokens jf. gotcha #49; knapperne er inde i allerede tema-værnede regioner. */
.msd-size-row {
    display: flex; align-items: stretch; gap: 8px;
}
.msd-size-step {
    flex: 0 0 auto; width: var(--ctl-lg); min-height: var(--ctl-lg);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg); color: var(--pink-strong);
    font-size: var(--fs-base); font-weight: var(--fw-strong);
    cursor: pointer; touch-action: none;   /* hold-for-gentag: ingen scroll-kapring under hold */
}
.msd-size-step:hover:not(:disabled)  { background: var(--pink-soft); }
.msd-size-step:active:not(:disabled) { background: var(--pink-soft-hover, var(--pink-soft)); }
.msd-size-value {
    flex: 1 1 auto; min-width: 0; min-height: var(--ctl-lg);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--card); color: var(--fg);
    font-size: var(--fs-base); font-weight: var(--fw-strong);
    text-align: center; cursor: text;
}
.msd-size-row .msd-font-size-input {
    flex: 1 1 auto; min-width: 0; min-height: var(--ctl-lg);
    text-align: center; font-size: var(--fs-base);
}
.msd-size-slider {
    width: 100%; margin-top: 10px;
    accent-color: var(--pink-strong);
    touch-action: pan-x;   /* vandret traek justerer; lodret scroller stadig siden */
}
.msd-size-step.msd-is-disabled, .msd-size-value.msd-is-disabled, .msd-size-slider.msd-is-disabled {
    opacity: .45; cursor: not-allowed;
}
/* v2.16.1: LAAST AF DESIGNEREN — hele gruppen daempes, ikke kun de enkelte knapper.
   Containeren ejer daempningen; derfor slaas per-element-opaciteten fra herinde (ellers
   ganges .45 med .55 og kontrollen bliver naesten usynlig i stedet for tydeligt graa). */
.msd-size-group.msd-size-locked { opacity: .55; }
.msd-size-group.msd-size-locked .msd-is-disabled { opacity: 1; }
.msd-size-group.msd-size-locked .msd-size-value  { color: var(--muted-fg); }
.msd-size-group.msd-size-locked .msd-size-step   { color: var(--muted-fg); }
.msd-size-group.msd-size-locked .msd-size-slider { accent-color: var(--muted-fg); }
.msd-size-locked-note {
    margin: 6px 0 0; font-family: var(--font-ui);
    font-size: var(--fs-label); color: var(--muted-fg);
}

/* v1.88.0 / Fase 2: gæst → "Gem"-dialog (log ind / opret konto). Designer-pink-tokens (editor-body). */
/* v1.117.0 (Johns fund 5/9): manglende størrelses-valg SKAL kunne ses. Sektionen
   åbnes og pulserer med et rødt omrids i ~2 sek. — så øjet lander på feltet. */
@keyframes msd-size-alert-puls {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 57, 43, 0); }
    20%, 60% { box-shadow: 0 0 0 3px var(--danger, #c0392b); }
}
.msd-buy-section.msd-size-alert {
    animation: msd-size-alert-puls 1.1s ease-in-out 2;
    border-radius: var(--radius-md, 10px);
}

/* v1.110.0: HJÆLPE-BOKSEN (OPLAEG-hjaelp-boks.md). Knappen er bevidst den mest
   diskrete i topbaren (ghost) — den skal kunne findes, ikke råbe. Pillen står
   bund-VENSTRE: købsknappen bor i højre skinne/hjørne og må aldrig dækkes. */
.msd-help-btn {
    background: none; border: 1px solid var(--border, #e3e3e8); color: var(--fg, #1c1c1e);
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif); font-size: var(--fs-body, 13px);
    padding: 7px 14px; border-radius: var(--radius-pill, 20px); cursor: pointer;
}
.msd-help-btn:hover { background: var(--pink-soft, #edf2ed); border-color: var(--pink-border, #d3ded3); }

.msd-help-pill {
    position: fixed; left: 12px; bottom: 14px; z-index: 100000;
    display: flex; align-items: center; gap: 2px;
    background: var(--fg, #1c1c1e); color: var(--card, #fff);
    border-radius: var(--radius-pill, 20px); box-shadow: 0 8px 26px rgba(0,0,0,.28);
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif); font-size: var(--fs-base, 14px);
}
.msd-help-pill button {
    background: none; border: none; color: inherit; font: inherit; cursor: pointer; padding: 11px 6px 11px 16px;
}
.msd-help-pill .msd-help-pill-luk { padding: 11px 14px 11px 6px; font-size: 17px; line-height: 1; opacity: .7; }
.msd-help-pill .msd-help-pill-luk:hover { opacity: 1; }
@media (max-width: 900px) {
    /* over mobilbjælken ("Se din pris"-bunden) — aldrig oven på den */
    .msd-help-pill { bottom: 78px; }
}

.msd-help-felt {
    display: block; width: 100%; box-sizing: border-box; margin: 0 0 10px;
    padding: 10px 12px; border: 1px solid var(--border, #e3e3e8); border-radius: var(--radius-md, 10px);
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif); font-size: var(--fs-base, 14px);
    color: var(--fg, #1c1c1e); background: var(--card, #fff); resize: vertical;
}
.msd-help-felt:focus { outline: none; border-color: var(--pink-border, #d3ded3); box-shadow: 0 0 0 3px var(--pink-soft, #edf2ed); }

/* v1.107.0: emoji-boblen — lille selvlukkende besked over det felt der tastes i
   (RushOrderTees-mønstret, Johns valg 4/9). Placeres af F.ttVisEmojiTip via inline
   top/left; pilen peger ned mod feltet. */
.msd-emoji-tip {
    position: fixed; z-index: 100001; max-width: 300px;
    background: var(--card, #fff); color: var(--fg, #1c1c1e);
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    font-size: var(--fs-body, 13px); line-height: 1.45;
    padding: 12px 16px; border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--border, #e3e3e8);
    box-shadow: 0 10px 32px rgba(0,0,0,.22);
    pointer-events: none;
}
.msd-emoji-tip::after {
    content: ''; position: absolute; left: 50%; bottom: -7px; margin-left: -7px;
    width: 14px; height: 14px; transform: rotate(45deg);
    background: var(--card, #fff);
    border-right: 1px solid var(--border, #e3e3e8);
    border-bottom: 1px solid var(--border, #e3e3e8);
}
.msd-emoji-tip.is-under::after {
    bottom: auto; top: -7px;
    border-right: none; border-bottom: none;
    border-left: 1px solid var(--border, #e3e3e8);
    border-top: 1px solid var(--border, #e3e3e8);
}

.msd-guest-backdrop {
    position: fixed; inset: 0; z-index: 100000; background: rgba(28,28,30,.45);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.msd-guest-dialog {
    background: var(--card, #fff); color: var(--fg, #1c1c1e); font-family: var(--font-ui, 'Inter', system-ui, sans-serif);
    width: 100%; max-width: 360px; border-radius: 16px; padding: 22px 22px 18px;
    box-shadow: 0 18px 50px rgba(0,0,0,.28); border: 1px solid var(--border, #e3e3e8);
}
.msd-guest-title { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--pink-strong, #c14878); }
.msd-guest-text { margin: 0 0 14px; font-size: 14px; line-height: 1.45; color: var(--fg, #1c1c1e); }
.msd-guest-err { margin: 0 0 12px; font-size: 13px; color: #c0392b; }
.msd-guest-actions { display: flex; flex-direction: column; gap: 8px; }
.msd-guest-btn {
    width: 100%; box-sizing: border-box; min-height: 42px; border-radius: 10px; padding: 10px 14px;
    font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid transparent;
    transition: background .15s, color .15s, border-color .15s;
}
.msd-guest-btn:disabled { opacity: .6; cursor: default; }
.msd-guest-primary { background: var(--pink-strong, #c14878); color: var(--on-pink); border-color: var(--pink-strong, #c14878); }
.msd-guest-primary:hover:not(:disabled) { background: #a83c66; border-color: #a83c66; }
.msd-guest-secondary { background: var(--pink-soft, #fbeaf0); color: var(--pink-strong, #c14878); border-color: var(--border, #e3e3e8); }
.msd-guest-secondary:hover:not(:disabled) { background: #f3d2e0; }
.msd-guest-ghost { background: transparent; color: var(--muted-fg, #8a8a8e); border-color: transparent; min-height: 36px; font-weight: 500; }
.msd-guest-ghost:hover:not(:disabled) { color: var(--fg, #1c1c1e); }

/* ── v1.100.0 / Fase A: normal produktside (body.msd-product-page) — tilvalg + pris + CTA ── */
/* Scoped til .msd-product-page så editor + andre sider er upåvirkede. */
body.msd-product-page form.cart { display: none; } /* fallback: køb kun via editoren (Fase A) */
/* v1.132.3: ugyldigt/brugt design-link-besked (server-rendret). Klasse-/token-styret — inline-style
   i PHP fjernet. --warning-*-system-farver. .95rem = system-notice-tekst (whitelistet i lint). */
.msd-pp-link-invalid {
    margin: 0 0 16px; padding: 12px 14px; border-radius: var(--radius-sm); font-size: .95rem;
    background: var(--warning-bg); border: 1px solid var(--warning-border); color: var(--warning-fg);
}
.msd-pp { margin: 16px 0; }
.msd-pp-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.msd-pp-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.msd-pp-option-label { font-size: var(--fs-body); font-weight: var(--fw-normal); color: var(--fg); }
/* Kontekst-layout; felt-udtryk = FELT-rollen (body.msd-product-page-prefix bevaret som rolle-
   selektor dér, jf. v1.127.0 DEL B: specificitet over temaets select-regler). B7: padding 9/10. */
body.msd-product-page .msd-pp-option-select {
    width: 100%; max-width: none; padding: 9px 10px;
    height: var(--ctl-lg); box-sizing: border-box;
}
.msd-pp-price { font-size: var(--fs-display); font-weight: var(--fw-strong); color: var(--fg); margin: 8px 0 14px; }
/* pre-JS-fallback: styling før product-page.js tilføjer .msd-pp-card (kort millisekund).
   Udtryk (fyld/tekst/radius/vægt/fs/hover) = PRIMÆR-rollen; kort-layout sættes af pp-card-reglen. */
.msd-pp-cta {
    display: inline-block; padding: 13px 26px; text-decoration: none;
}

/* ── v1.104.0: produktside-restyling (iOS-stil) — kort, piller, stepper, picker ── */
/* Scoped til body.msd-product-page / .msd-pp. Rent additivt — ingen hover-regler fjernet. */

/* Kort-struktur: blødt afrundet kort med hairline + diskret skygge, ens lodret rytme. */
.msd-pp.msd-pp-card {
    background: var(--card); border: 1px solid var(--border); border-radius: 16px;
    padding: 20px 20px 18px; box-shadow: 0 2px 10px rgba(0,0,0,.04);
    display: flex; flex-direction: column; gap: 14px; margin: 16px 0;
}
.msd-pp-card .msd-pp-options { margin-bottom: 0; gap: 14px; }
.msd-pp-card .msd-pp-option { flex-direction: column; align-items: stretch; gap: 6px; }

/* Antal: iOS-stepper [−][tal][+] i afrundet kapsel; native input skjult (source of truth). */
.msd-pp-qty-native { display: none !important; }
.msd-pp-qty-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.msd-pp-stepper {
    position: relative; display: inline-flex; align-items: stretch;
    border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--bg); overflow: visible;
}
.msd-pp-step {
    width: 40px; padding: 8px 0; border: none; background: none; cursor: pointer;
    font-size: var(--fs-base); line-height: 1; color: var(--pink-strong); font-weight: var(--fw-strong);
    transition: background .15s;
}
.msd-pp-step:hover { background: var(--pink-soft); }
.msd-pp-step:active { background: var(--pink-soft-hover); }
.msd-pp-step:first-child { border-radius: var(--radius-pill) 0 0 var(--radius-pill); }
.msd-pp-step:last-child  { border-radius: 0 var(--radius-pill) var(--radius-pill) 0; }
.msd-pp-qty-display {
    min-width: 56px; padding: 8px 10px; border: none; cursor: pointer; text-align: center;
    background: var(--card); font-size: var(--fs-base); font-weight: var(--fw-strong); color: var(--fg);
    border-left: 1px solid var(--border); border-right: 1px solid var(--border);
    transition: background .15s;
}
.msd-pp-qty-display:hover { background: var(--pink-soft); }

/* Scroll-picker: hjul-agtig lodret liste (1..max) i lille popover under tallet. */
.msd-pp-qty-picker {
    position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    z-index: 40; background: var(--card); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.14); width: 88px; max-height: 220px; overflow: hidden;
}
.msd-pp-qty-picker-list {
    list-style: none; margin: 0; padding: 6px 0; max-height: 220px; overflow-y: auto;
    -webkit-overflow-scrolling: touch; scroll-snap-type: y proximity;
}
.msd-pp-qty-picker-list li {
    padding: 7px 0; text-align: center; font-size: var(--fs-body); color: var(--fg); cursor: pointer;
    scroll-snap-align: center; transition: background .1s;
}
.msd-pp-qty-picker-list li:hover { background: var(--pink-soft); color: var(--pink-strong); }
.msd-pp-qty-picker-list li.is-selected { background: var(--pink-strong); color: var(--on-pink); font-weight: var(--fw-strong); }

/* Pris: stor rolig total + diskret note. */
.msd-pp-card .msd-pp-price { display: flex; align-items: baseline; gap: 10px; margin: 2px 0 0; }
.msd-pp-price-total { font-size: var(--fs-display); font-weight: var(--fw-strong); color: var(--fg); letter-spacing: -0.01em; }
.msd-pp-price-note  { font-size: var(--fs-label); font-weight: var(--fw-normal); color: var(--muted-fg); }

/* Knapper som fuldbredde-piller (ÉN kort-kontekstregel pr. knap, flettet layout + kompakt skala).
   Udtryk = rollerne (primær CTA / sekundær køb-senere); transition beholder transform for :active. */
body.msd-product-page .msd-pp-card .msd-pp-cta {
    display: block; width: 100%; box-sizing: border-box; text-align: center; text-decoration: none;
    padding: 12px 18px; min-height: var(--ctl-lg);
    transition: background .15s, transform .05s;
}
.msd-pp-card .msd-pp-cta:active { transform: scale(.99); }
body.msd-product-page .msd-pp-card .msd-pp-buy-later {
    display: block; width: 100%; box-sizing: border-box; text-align: center;
    padding: 11px 18px; min-height: var(--ctl-lg); margin-top: -2px;
    transition: background .15s, color .15s, transform .05s;
}
.msd-pp-card .msd-pp-buy-later:active:not(:disabled) { transform: scale(.99); }
.msd-pp-card .msd-pp-buy-later:disabled { opacity: .6; cursor: default; }
/* v1.132.3: added-bekræftelsen er nu klasse-/token-styret (var(--success)); inline-style i PHP fjernet.
   Base-reglen holder elementet skjult pre-JS (før .msd-pp-card sættes); showAdded() sætter display:flex. */
.msd-pp-added { display: none; }
.msd-pp-card .msd-pp-added { display: none; align-items: center; gap: 10px; font-size: var(--fs-base); color: var(--success); }
.msd-pp-card .msd-pp-added a { color: var(--pink-strong); font-weight: var(--fw-strong); }

/* ── v1.104.1: begræns købskortets bredde på desktop (fulgte temaets fulde kolonne). ── */
/* Piller/stepper/knapper er allerede relative til kortet (width:100%/wrap) og skalerer med. */
@media (min-width: 641px) {
    body.msd-product-page .msd-pp.msd-pp-card { max-width: 460px; }
}

/* ── v1.104.2: kompakt købskort + højrestillet i summary-kolonnen (desktop). ──── */
/* Rent additivt — overstyrer v1.104.0/.1-værdier via samme/side-scoped selektorer. */
@media (min-width: 641px) {
    /* Placering: kortets HØJRE kant flugter med kolonnens højre kant (luften ender
       til venstre mod titlen — ikke som tom lomme til højre). */
    body.msd-product-page .msd-pp.msd-pp-card { max-width: 400px; margin-left: auto; }
}
/* Kompakt skala (~15-20% mindre). Desktop-højde = --ctl-lg (39); mobil bumper primære knapper til
   --ctl-touch (44, Apples min. touch-mål) i max-width:640-queryen nedenfor. */
body.msd-product-page .msd-pp.msd-pp-card { padding: 16px 16px 14px; gap: 11px; }
body.msd-product-page .msd-pp-card .msd-pp-options { gap: 11px; }
body.msd-product-page .msd-pp-step { width: 40px; padding: 10px 0; font-size: var(--fs-base); }
body.msd-product-page .msd-pp-qty-display { min-width: 48px; padding: 10px 8px; font-size: var(--fs-base); }
body.msd-product-page .msd-pp-price-total { font-size: var(--fs-display); }
body.msd-product-page .msd-pp-card .msd-pp-price { margin: 0; }
/* (pp-cta/pp-buy-later kompakt padding/min-height er foldet ind i deres kort-kontekstregler ovenfor.) */

/* Mobil (≤640px): primære knapper + stepper op på --ctl-touch (44) for touch-mål. Kortet er fuld bredde her. */
@media (max-width: 640px) {
    body.msd-product-page .msd-pp-card .msd-pp-cta,
    body.msd-product-page .msd-pp-card .msd-pp-buy-later,
    body.msd-product-page .msd-pp-step { min-height: var(--ctl-touch); }
    body.msd-product-page .msd-pp-option-select { height: var(--ctl-touch); } /* v1.125.0: dropdown touch-mål */
}

/* ── v1.105.0: ÉN samlet købskolonne — titel + "fra pris" i blokken; tema-titel/pris skjult. ── */
/* Rent additivt. PHP fjerner titel/pris via hooks (klassisk) + render_block (block-tema);     */
/* CSS her er defensiv fallback for temaer der printer dem ad andre veje. Scoped så related-   */
/* products og vores egen .msd-pp-price IKKE rammes.                                            */
body.msd-product-page .summary .product_title,
body.msd-product-page .entry-summary .product_title,
body.msd-product-page .summary > .price,
body.msd-product-page .entry-summary > .price { display: none; }

.msd-pp-title {
    margin: 0; font-size: var(--fs-display); font-weight: var(--fw-normal); line-height: 1.2; color: var(--fg);
}
.msd-pp-from { font-size: var(--fs-body); font-weight: var(--fw-normal); color: var(--muted-fg); margin: -6px 0 2px; }
/* Antal-linje: label venstre, stepper højre (som mockup). */
.msd-pp-qty-row .msd-pp-option-label { font-size: var(--fs-body); font-weight: var(--fw-normal); color: var(--fg); }

/* ── v1.105.1: to-trins-siden — billede + købskolonne SAMLET (mockup-layout). ──── */
/* Scoped til body.msd-two-step (sættes kun på MSD-produktsider uden ?design=1).   */
/* Rent additivt: begrænser produkt-layoutets samlede bredde til ~1100px centreret, */
/* så kolonnerne står side om side med moderat gap — kortet (max 400px, højre-      */
/* stillet i sin kolonne) ender umiddelbart til højre for billedet, ikke ved        */
/* skærmkanten. Mobil (<641px) uændret (reglerne er desktop-only).                  */
@media (min-width: 641px) {
    /* Block-tema: kolonne-blokken der indeholder produkt-galleriet (præcis via :has). */
    body.msd-two-step main .wp-block-columns:has(.wp-block-woocommerce-product-image-gallery) {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
        gap: 36px;
    }
    /* Generisk fallback (block-temaer uden columns-struktur): stram galleri+summary-wrapper. */
    body.msd-two-step main .is-layout-flex:has(> .wp-block-woocommerce-product-image-gallery) {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
        gap: 36px;
    }
    /* Klassiske temaer (Flatsome m.fl.): begræns selve produkt-containeren. */
    body.msd-two-step .woocommerce div.product,
    body.msd-two-step div.product.type-product {
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── v1.105.2: beskrivelse i købskolonnen (titel → fra-pris → beskrivelse → kort). ── */
.msd-pp-desc {
    font-size: var(--fs-body); font-weight: var(--fw-normal); color: var(--muted-fg); line-height: 1.5; margin: -2px 0 2px;
}
.msd-pp-desc p { margin: 0 0 6px; }
.msd-pp-desc p:last-child { margin-bottom: 0; }

/* ── v1.106.0: QR-kode med link — dialog + redigerbart link-felt i panelet. ───── */
.msd-qr-dialog-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100000;
    display: flex; align-items: center; justify-content: center;
}
.msd-qr-dialog {
    background: var(--card); border-radius: 14px; padding: 18px 18px 14px; width: 92%; max-width: 360px;
    box-shadow: 0 16px 44px rgba(0,0,0,.25); border: 1px solid #e5e5ea;
}
.msd-qr-dialog-title { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--pink-strong); }
.msd-qr-dialog-hint  { margin: 0 0 10px; font-size: 13px; color: #8e8e93; }
.msd-qr-url-field {
    width: 100%; box-sizing: border-box; padding: 9px 10px; font-size: 13px;
    border: 1px solid #d1d1d6; border-radius: 8px; background: var(--card); color: var(--fg);
}
.msd-qr-url-field:focus { outline: none; border-color: var(--pink-strong); box-shadow: 0 0 0 2px rgba(193,72,120,.15); }
.msd-qr-url-label { display: block; font-size: 11px; font-weight: 600; color: #8e8e93; margin: 8px 0 4px; }
.msd-qr-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.msd-qr-dialog-btn {
    padding: 8px 16px; border-radius: 8px; border: 1px solid #d1d1d6; background: var(--card);
    color: var(--fg); font-size: 13px; font-weight: 600; cursor: pointer; transition: background .12s;
}
.msd-qr-dialog-btn:hover { background: var(--bg); }
.msd-qr-dialog-ok { background: var(--pink-strong); border-color: var(--pink-strong); color: var(--on-pink); }
.msd-qr-dialog-ok:hover { background: #a83c66; }
#msd-qr-update { margin-top: 8px; }

/* ── v1.106.1: "Upload fra telefon" (mobil-QR genindført) — ghost-stil så den ikke
   forveksles med den pink "QR-kode med link…"-knap. ── */
.msd-phone-upload-btn {
    background: var(--card) !important; color: var(--pink-strong) !important; border: 1px solid #e3c3d2 !important;
    margin-top: 8px;
}
.msd-phone-upload-btn:hover:not(:disabled) { background: var(--pink-soft) !important; }

/* ── v1.107.0: rotations-knapper (⟲/⟳) i crop-overlayet — samme udtryk som −/+. ── */
.msd-rot-btn { font-size: 15px; border-left: 1px solid #e5e5ea; }

/* ════════════════════════════════════════════════════════════════════════════
   ROLLE-REGISTER (v1.129.0) — de tre dokumenterede knap-/felt-roller defineret ÉT
   sted. NY knap/felt = TILFØJ selektoren til den rette rolle-gruppe herunder;
   kopiér ALDRIG rolle-deklarationer ind i en ny regel (håndhæves af rolle-tjekket
   i frontendTokenLint.test.js: en rolle-medlems FYLD må kun stå i rolle-blokket).
   Kontekst (højde/bredde/padding/flex + de dokumenterede B2/B3-modifiers) forbliver
   små tillæg i elementernes egne regler ovenfor. Rollerne bruger !important på de
   tema-udsatte properties, fordi CTA'en (og export.css' blå download-knap) ellers
   taber til WooCommerce-/tema-`.button`-regler af højere element-specificity.
   ════════════════════════════════════════════════════════════════════════════ */

/* v1.102.3 (Johns fund 4/9): Complianz' "Administrer samtykke"-fane kiggede op bag
   editorens bund — på ALLE skærmbredder (derfor GLOBAL, ikke i mobil-blokken som
   mysticky-værnet). Samtykket ER givet før man når hertil; fanen skjules KUN i
   editor-fuldskærm — alle normale sider beholder den (compliance urørt). */
body.msd-editor-fullscreen #cmplz-manage-consent,
body.msd-editor-fullscreen .cmplz-manage-consent { display: none !important; }

/* === ROLLE: primær knap === (--pink fyld · --on-pink tekst · --radius-md · --fw-strong · --fs-base) */
.msd-editor-shell .msd-region-right form.cart .single_add_to_cart_button,
.msd-pp-cta,
.msd-unique-name-add,
.msd-unique-name-save,
.msd-unique-bulk-add,
/* v1.196.0: lav-opløsnings-dialogens OK-knap. Meldt ind i rollen VED OPRETTELSEN — den vises
   kun betinget (som "Del design" i v1.193.2) og ville ellers aldrig blive SET stå forkert. */
.msd-lowres-ok {
    background: var(--pink) !important;
    color: var(--on-pink) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-ui);
    font-size: var(--fs-base) !important;
    font-weight: var(--fw-strong) !important;
    text-transform: none !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background 0.15s;
}
.msd-editor-shell .msd-region-right form.cart .single_add_to_cart_button:hover,
.msd-pp-cta:hover,
.msd-unique-name-add:hover,
.msd-unique-name-save:hover,
.msd-unique-bulk-add:hover,
.msd-lowres-ok:hover {
    background: var(--pink-hover) !important;
    color: var(--on-pink) !important;
}
/* Kontekst-modifier B2 (bevidst pilleform på de kompakte navne-/bulk-knapper). */
.msd-unique-name-add,
.msd-unique-name-save,
.msd-unique-bulk-add { border-radius: var(--radius-pill) !important; }
/* Kontekst-modifier B3 (kompakt skrift på inline-Gem/bulk-add — samme mønster som pagebar-28). */
.msd-unique-name-save,
.msd-unique-bulk-add { font-size: var(--fs-body) !important; }

/* === ROLLE: sekundær knap === (--pink-soft fyld · ingen kant · --pink-strong tekst · --radius-md · --fw-strong) */
.msd-btn-save,
.msd-btn-fetch,
/* v1.193.2: "Del design" fik ALDRIG en rolle da den blev bygget (v1.163.0) og stod derfor med
   ren browser-default. Den er skjult indtil designet er gemt, så fejlen kunne ikke ses. */
.msd-btn-share,
.msde-btn-download,
.msd-pp-card .msd-pp-buy-later {
    background: var(--pink-soft) !important;
    color: var(--pink-strong) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-ui);
    font-size: var(--fs-base) !important;
    font-weight: var(--fw-strong) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.msd-btn-save:hover,
.msd-btn-fetch:hover,
.msd-btn-share:hover:not(:disabled),
.msde-btn-download:hover:not(:disabled),
.msd-pp-card .msd-pp-buy-later:hover:not(:disabled) {
    background: var(--pink-soft-hover) !important;
    color: var(--pink-strong) !important;
}

/* === ROLLE: admin-værktøj === (v1.167.0 — mørk/neutral, så "Ret design" ikke forveksles med
   kundens knapper. Samme knapform som naboerne; kun farverne skiller sig ud, og kun via tokens.
   Knappen findes KUN i DOM'en for brugere med butiks-rettigheder — se render_controls. */
.msd-btn-admin {
    background: var(--fg) !important;
    color: var(--card) !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    font-family: var(--font-ui);
    font-size: var(--fs-base) !important;
    font-weight: var(--fw-strong) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: opacity 0.15s;
}
.msd-btn-admin:hover { opacity: 0.85; color: var(--card) !important; }

/* === ROLLE: felt (select/input) === (--bg fyld · 1px --border · --radius-md · --fs-body · fokus-ring 3px) */
/* v1.141.0: chevron-pil på ALLE select-varianter (produktside + editor) ÉT sted her i FELT-rollen
   — appearance:none skjuler den native pil (temaet nulstiller den også), og en neutral chevron-glyf
   (inline SVG data-URI, stroke = --muted-fg-hex #8a8a8e) tegnes til højre. background-color (ikke
   shorthand) så pil-billedet ikke wipes; padding-right giver plads. Rammer KUN selects (ingen inputs). */
.msd-region-right .msd-option-select,
.msd-editor-shell .msd-region-right form.cart select,
body.msd-product-page .msd-pp-option-select {
    background-color: var(--bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%238a8a8e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 8px;
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-family: var(--font-ui);
    font-size: var(--fs-body);
    padding-right: 32px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
/* v1.140.2: felt-rollens HOVER — genindført. Segment-pillernes hover forsvandt da pillerne
   blev afløst af felt-rollens dropdown (v1.125.0) og den døde pille-CSS blev slettet
   (v1.129.2); felt-rollen fik dengang kun :focus. Hover-udtrykket bor HER, samlet med
   rollens øvrige states, så det aldrig kan strippes separat igen (låst af
   feltHoverLock.test.js). Tokens = Udseende-fanens justerbare farver. @media (hover:hover)
   → ingen sticky hover på touch. */
@media (hover: hover) {
    .msd-region-right .msd-option-select:hover:not(:disabled):not(:focus),
    .msd-editor-shell .msd-region-right form.cart select:hover:not(:disabled):not(:focus),
    body.msd-product-page .msd-pp-option-select:hover:not(:disabled):not(:focus) {
        border-color: var(--pink);
        background-color: var(--pink-soft); /* v1.141.0: kun -color (ikke shorthand) → chevron bevares */
    }
}
.msd-region-right .msd-option-select:focus,
.msd-editor-shell .msd-region-right form.cart select:focus,
body.msd-product-page .msd-pp-option-select:focus {
    outline: none;
    border-color: var(--pink);
    box-shadow: 0 0 0 3px var(--pink-soft);
}

/* ════════════════════════════════════════════════════════════════════════════
   TEMA-VÆRN — globale button-styles (v1.136.3). Flatsome 3.18.4 (og andre temaer)
   sætter `button { text-transform: uppercase; font-weight: 700; letter-spacing: ~0.03em }`
   GLOBALT. Editor-chromets knapper der ikke selv sætter disse (fx venstre-skinnens
   .msd-rail-btn) arvede dermed VERSALER/700/letter-spacing på live ("råbende" menu),
   mens de var korrekte på Local (andet tema). Værn: normalisér text-transform +
   letter-spacing eksplicit på ALLE chrome-knapper i de seks chrome-regioner, + en
   font-weight-BASELINE (--fw-normal, UDEN !important). Rolle-registrets bevidste udtryk
   bevares: rollerne sætter font-weight/text-transform med !important og vinder over
   baseline'en → CTA m.fl. forbliver --fw-strong/none. CANVAS-regionen (.msd-region-canvas
   / kundens design) er ALDRIG omfattet (Fase 1-reglen). Se gotcha #48/#52 + "Flad regel-
   stak + tema-værn". ════════════════════════════════════════════════════════════ */
body.msd-editor-fullscreen .msd-region-header button,
body.msd-editor-fullscreen .msd-region-header .button,
body.msd-editor-fullscreen .msd-region-subbar button,
body.msd-editor-fullscreen .msd-region-subbar .button,
body.msd-editor-fullscreen .msd-region-pagebar button,
body.msd-editor-fullscreen .msd-region-pagebar .button,
body.msd-editor-fullscreen .msd-region-left button,
body.msd-editor-fullscreen .msd-region-left .button,
body.msd-editor-fullscreen .msd-region-right button,
body.msd-editor-fullscreen .msd-region-right .button,
body.msd-editor-fullscreen .msd-region-right label,
/* v1.145.0: bund-bjælken er en NY chrome-container UDEN for de seks regioner (gotcha #53).
   v1.146.0: + .button (row1's "Hent"-knap er et <a class="button"> → temaets .button-style ellers).
   v1.149.0: + .msd-textbar (mobil tekst-værktøjsbjælke) — samme nye-chrome-container-regel. */
body.msd-editor-fullscreen .msd-mobilebar button,
body.msd-editor-fullscreen .msd-mobilebar .button,
body.msd-editor-fullscreen .msd-textbar button,
/* v1.152.0: + .msd-toolbar-panel (værktøjs-subpanelet) — de ADOPTEREDE paneler (lag-panel/
   bibliotek-vælger) har egne knapper og er ligeledes en ny chrome-container uden for regionerne. */
body.msd-editor-fullscreen .msd-toolbar-panel button,
body.msd-editor-fullscreen .msd-toolbar-panel .button,
/* v1.181.1: + de FLYDENDE OVERLAYS. De portaleres til <body> (gotcha #33) og ligger derfor
   UDEN FOR de seks chrome-regioner — Flatsomes globale button-regler ramte dem uhindret.
   MÅLT i WebKit: med `button{margin:0 15px 15px 0}` voksede element-bjælken fra 38 til 53 px,
   og knapperne fik 5 px luft over / 20 px under (= "knapper i toppen, tom luft i bunden" fra
   iPhone-rapporten). Local kører et neutralt tema → symptomet fandtes KUN på live. */
body.msd-editor-fullscreen .msd-zoom-control button,
body.msd-editor-fullscreen .msd-delete-control,
body.msd-editor-fullscreen .msd-align-bar button,
/* v1.196.0: + lav-opløsnings-dialogen — også et <body>-monteret overlay (gotcha #53 del 6). */
/* v1.2.0: + lærredets værktøjsdok og sidekortene. Det NYE layout flytter Fortryd/Gentag,
   zoom og sidefanerne INDE i .msd-region-canvas — og netop canvas-regionen er (med vilje)
   udeladt af værnet, fordi kundens design aldrig må arve tema-typografi. De to beholdere er
   editor-chrome, ikke design, så de meldes ind eksplicit. MÅLT 24/8: uden dette stod
   "FORTRYD/GENTAG" i versaler med Flatsomes spærring. */
body.msd-editor-fullscreen .msd-tool-dock button,
body.msd-editor-fullscreen .msd-page-rail button,
/* v1.4.0: + vente-dialogen under upload — endnu et <body>-monteret overlay uden for de
   seks chrome-regioner. MÅLT 24/8: uden dette stod "Annullér" i VERSALER med Flatsomes
   spærring, præcis som lav-opløsnings-dialogen gjorde før v1.196.0. */
body.msd-editor-fullscreen .msd-uploadwait button,
body.msd-editor-fullscreen .msd-lowres-dialog button,
body.msd-editor-fullscreen .msd-region-footer button,
body.msd-editor-fullscreen .msd-region-footer .button {
    text-transform: none !important;
    letter-spacing: normal !important;
    font-weight: var(--fw-normal);
    /* v1.140.3 (del 4): Flatsome sætter OGSÅ button{line-height:2.4em} globalt → indhold
       (fx 31.2px i en 33px side-knap) oversteg knappen = skæv tekst. Normalisér til 1.2.
       Elementer med bevidst egen line-height (CTA-kontekstreglen, højere specificity) vinder. */
    line-height: 1.2 !important;
}

/* v1.140.3 (del 4): GEOMETRISK lodret centrering på chrome-KNAPPER (ikke labels) — flex-
   containere centrerer indholdet uafhængigt af line-height. Bevidst UDEN display her:
   display i et værn ville tvinge skjulte mobil-knapper (display:none) frem. Knapper der
   allerede er flex (zoom, stepper, skinne) får blot bekræftet centreringen; side-chips
   (.msd-footer-page) gøres flex i egen basis-regel. */
body.msd-editor-fullscreen .msd-region-header button,
body.msd-editor-fullscreen .msd-region-subbar button,
body.msd-editor-fullscreen .msd-region-pagebar button,
body.msd-editor-fullscreen .msd-region-left button,
body.msd-editor-fullscreen .msd-region-right button,
body.msd-editor-fullscreen .msd-mobilebar button,
/* v1.146.3: + .button (bjælkens "Hent" er et <a class="button"> → Flatsomes globale
   .button{margin:0 11px 11px 0} gav den bund-margin = sad 6px højere end Gem/PDF på live). */
body.msd-editor-fullscreen .msd-mobilebar .button,
body.msd-editor-fullscreen .msd-textbar button,
body.msd-editor-fullscreen .msd-toolbar-panel button,
body.msd-editor-fullscreen .msd-toolbar-panel .button,
/* v1.181.1: + de flydende overlays (se ovenfor) — det er NETOP margin-nulstillingen her der
   fjerner Flatsomes 15 px bund-margin, som gjorde bjælken 15 px for høj med knapperne i toppen. */
body.msd-editor-fullscreen .msd-zoom-control button,
body.msd-editor-fullscreen .msd-delete-control,
body.msd-editor-fullscreen .msd-align-bar button,
body.msd-editor-fullscreen .msd-uploadwait button,
body.msd-editor-fullscreen .msd-lowres-dialog button,
body.msd-editor-fullscreen .msd-tool-dock button,
body.msd-editor-fullscreen .msd-page-rail button,
body.msd-editor-fullscreen .msd-region-footer button {
    align-items: center;
    justify-content: center;
    /* v1.140.4 (del 5): Flatsomes globale button{margin:0 15px 15px 0} skubbede knapper LODRET
       skævt i deres rækker (målt: side-pillens bund-margin løftede den ind i skillelinjen).
       Afstand mellem chrome-knapper kommer fra vores egne gap-tokens — ALDRIG arvet margin.
       (Kun knapper + bjælkens a.button — labels beholder deres layout-margins.) */
    margin: 0;
}

/* v1.140.4: BEVIDSTE margin-undtagelser — genindsat SAMLET her i værnet (højere specificity
   end nulstillingen). De to knapper bar deres egen spacing via margin-top (ingen gap-container). */
body.msd-editor-fullscreen .msd-region-right .msd-unique-bulk-toggle,
body.msd-editor-fullscreen .msd-region-right .msd-phone-upload-btn {
    margin-top: 8px;
}

/* ── TEMA-VÆRN del 3 (v1.136.10): SAMME værn-blok, ANDET scope — MSD-PRODUKTSIDEN.
   Scope = body.msd-product-page (sættes KUN på produkter med MSD-design tilknyttet,
   `add_designer_body_class`/Fase A) — FPD-/almindelige produkter har ikke klassen og er urørte.
   Struktur: ét fælles værn-OMRÅDE, to scopes — editor-reglen ovenfor (inkl. fw-baseline, som
   rollerne overtrumfer med !important) + denne pp-regel med KUN transform/spacing: pp-stepperens
   egne klasser (.msd-pp-step/.msd-pp-qty-display) sætter selv --fw-strong UDEN !important, så en
   fw-baseline her ville udtynde dem (anderledes end editorens chrome). Symptom live: sekundær-
   knappen "Køb nu — design senere" i VERSALER+spærret (sekundær-rollen satte, modsat primær,
   ingen text-transform). */
body.msd-product-page .msd-pp button,
body.msd-product-page .msd-pp .button,
body.msd-product-page .msd-pp a.msd-pp-cta {
    text-transform: none !important;
    letter-spacing: normal !important;
    /* v1.140.3 (del 4): samme line-height-værn som editor-scopet (Flatsome 2.4em). */
    line-height: 1.2 !important;
}
body.msd-product-page .msd-pp button,
body.msd-product-page .msd-pp .button {
    align-items: center;
    justify-content: center;
    /* v1.140.4 (del 5): samme margin-værn som editor-scopet. Bevidste margins (fx køb-senere-
       knappens -2px overlap) sidder i kort-kontekstregler med højere specificity og består. */
    margin: 0;
}

/* Del 3 (A): stepper-geometri. Flatsomes globale `button { margin: 0 15px 15px 0; min-height }`
   lækkede ind i .msd-pp-stepper-knapperne (klasserne sætter padding, men ingen margin/min-height)
   → kapslen voksede til en stor oval med ekstra grå i bunden (samme mekanik som v1.136.8's
   .msd-qty-btn i editoren). Nulstil margin/min-height (tema-værn) → kompakt pille som Local. */
body.msd-product-page .msd-pp-stepper > button {
    margin: 0 !important;
    min-height: 0 !important;
    /* line-height: Flatsome sætter 2.4em globalt; .msd-pp-qty-display satte ingen egen → tallet
       voksede til 33.6px og stretch trak HELE kapslen til ~54px. 1.2 ≈ Local-udseendet (~38px). */
    line-height: 1.2 !important;
    box-shadow: none !important;
    box-sizing: border-box;
}

/* Del 3 (defensiv): spejl af editorens quantity-whitelist (v1.136.7) i pp-scope. WC-form.cart er
   skjult på produktsiden, men skulle et tema/plugin rendere en synlig quantity med egne ±-knapper,
   whitelistes kun tal-input + vores knapper (begge containere, klassenavn-uafhængigt). */
body.msd-product-page form.cart .quantity *:not(input.qty):not(.msd-qty-btn):not(label):not(:has(input.qty)),
body.msd-product-page form.cart .ux-quantity *:not(input.qty):not(.msd-qty-btn):not(label):not(:has(input.qty)) {
    display: none !important;
}

/* ── v2.14.0 / Fase 5: trykområde-koblingen ──────────────────────────────────────────
 *
 * En side hvis trykområde ikke er købt LÅSES — den skjules ikke. En forsvunden "Ryg"-fane
 * ville få kunden til at lede efter noget hun havde betalt for; en nedtonet fane med en
 * forklaring fortæller hvad hun skal gøre. Fanen forbliver klikbar, så beskeden kan komme
 * frem — derfor `pointer-events` urørt og kun `opacity` + markør der signalerer tilstanden. */
.msd-footer-page.is-locked {
    opacity: .45;
    cursor: not-allowed;
}

.msd-footer-page.is-locked:hover {
    opacity: .6;
}

.msd-locked-page-notice {
    font-size: 13px;
    line-height: 1.4;
    padding: 6px 10px;
    margin-left: 10px;
    border-radius: 8px;
    background: var(--card, #fff);
    color: var(--text, #1c1c1e);
    box-shadow: 0 1px 4px rgba(0, 0, 0, .15);
}

.msd-locked-page-notice a {
    margin-left: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════════════
   v1.0.4 — KØBSPANELET I EDITOREN (opgavens trin 2-4; mockup "TT Designer Editor 2.0")

   Scope: `.msd-region-right.msd-buypanel-active` — klassen sættes af buy-panel.js og
   KUN når THWEPO's prisberegner-tabel faktisk findes i editorens formular (tekstil).
   Papir, share-visning og produktsiden kan ikke rammes. Tema-værn (min-height ~39px,
   margin 15,5px på knapper — jf. textile-palette.css v1.0.3) nulstilles pr. kontrol.
   ═══════════════════════════════════════════════════════════════════════════════════ */

/* Formularen bliver panelets lodrette flow (var: flex-row til stepper+CTA). */
.msd-buypanel-active .msd-summary form.cart {
    display: flex; flex-direction: column; flex-wrap: nowrap; gap: 0;
    border-bottom: 0; padding-bottom: 0; margin: 0;
}

/* Basisprisen ("990,00 kr.") er støj når pris-boksen viser den rigtige total. */
.msd-buypanel-active:not(.is-editing) .msd-summary > .price { display: none; }

#msd-buy-panel { display: flex; flex-direction: column; gap: 18px; margin: 0 0 16px; }

.msd-buy-section { display: flex; flex-direction: column; gap: 8px; }
.msd-buy-heading {
    display: flex; align-items: baseline; gap: 8px;
    font-family: var(--font-ui);
    font-size: var(--fs-label); font-weight: var(--fw-strong);
    letter-spacing: .09em; color: var(--muted-fg);
}
.msd-buy-color-chosen {
    font-size: var(--fs-body); font-weight: var(--fw-normal);
    letter-spacing: 0; color: var(--fg); text-transform: none;
}

/* ── Trykområde-kort med til/fra-toggle (mockup-række: navn+mål · pris · switch) ── */
.msd-area-list { display: flex; flex-direction: column; gap: 6px; }
.msd-area-card {
    display: flex; align-items: center; gap: 10px;
    width: 100%; margin: 0 !important; min-height: 0;      /* tema-værn */
    padding: 10px 12px; box-sizing: border-box;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--card); cursor: pointer; text-align: left;
    font-family: var(--font-ui); line-height: 1.25;
    transition: background .15s, border-color .15s;
}
.msd-area-card:hover { border-color: var(--pink-border); }
.msd-area-card.is-on { background: var(--pink-tint); border-color: var(--pink-border); }
.msd-area-texts { display: flex; flex-direction: column; gap: 1px; flex: 1 1 auto; min-width: 0; }
.msd-area-name { font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--fg); }
.msd-area-dim  { font-size: var(--fs-label); color: var(--muted-fg); }
.msd-area-price { font-size: var(--fs-label); font-weight: var(--fw-strong); color: #c7c7cc; white-space: nowrap; }
.msd-area-card.is-on .msd-area-price { color: var(--fg); }
.msd-area-toggle {
    flex: 0 0 auto; width: 40px; height: 22px; border-radius: var(--radius-pill);
    background: #d9d9de; position: relative; transition: background .15s;
}
.msd-area-card.is-on .msd-area-toggle { background: var(--green); }
.msd-area-knob {
    position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: left .15s;
}
.msd-area-card.is-on .msd-area-knob { left: 20px; }

/* ── Farveprikker (samme udtryk som .msd-swatch i textile-palette.css) ── */
.msd-buy-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.msd-buy-swatch {
    width: 28px; height: 28px; min-width: 0; min-height: 0;   /* tema-værn */
    margin: 0 !important; padding: 0; flex: 0 0 auto; line-height: 1;
    border-radius: 50%; border: 0; cursor: pointer;
    background: var(--msd-swatch, #d8d8d8);
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.12);
}
.msd-buy-swatch.is-selected {
    box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--pink-strong);
}
.msd-buy-swatch.is-unknown { background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 0 0 / 8px 8px; }

/* ── Størrelses-tiles med −/antal/+ ── */
/* ⚠ 74 px, ikke 62. Flisen skal kunne RUMME sin stepper: 20 + 26 + 20 = 66 px indhold
   plus flisens egen kant og padding (6 px). Ved 62 px flød knapperne ud over kanten og
   lå oven på nabostørrelsens — målt i browseren 27/8. At skrumpe knapperne i stedet
   ville gøre dem sværere at ramme med en finger, og det er den forkerte vej på noget,
   kunden bruger til at bestille antal. */
/* v1.12.0 — FEM PR. RÆKKE, IKKE FIRE. Ti størrelser fyldte tre rækker i et 400 px panel.
   ⚠ PLADSEN ER TAGET FRA LUFTEN, IKKE FRA KNAPPERNE. −/+ bliver stående på 20 × 22 px:
   de er allerede på minimum for en finger, og et klik der rammer forkert her koster et
   forkert ANTAL i ordren. I stedet: flisens vandrette padding væk (0), gitterets gab
   6 → 4 px og tal-feltet 26 → 24 px. 20+24+20+2 = 66 px flise + 4 px gab = fem kolonner
   i 360 px indhold, mod fire før. Feltet rummer stadig tre cifre — John bestiller 150 af
   én størrelse, så to cifre er ikke nok. */
/* v1.123.0 (Johns valg 6/9, TETOS-stil — ERSTATTER v1.12.0-fliserne, regel 5):
   navn OVER feltet, lager-badge på feltets hjørne, tast direkte. −/+ er væk, og med
   dem hele stepper-geometrien; feltet selv er fingerstort (52×30). Gitteret ligger
   altid fremme (.msd-buy-fast), så alle størrelser i farven kan ses hele tiden. */
.msd-size-grid { display: flex; flex-wrap: wrap; gap: 10px 8px; }
.msd-size-tile {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    font-family: var(--font-ui);
}
/* v1.14.0 — UDSOLGT (Johns ønske 3). Samme `.is-oos` som farvepaletten allerede bruger.
   ⚠ GRÅ NOK TIL AT VÆRE ET SVAR, IKKE SÅ GRÅ AT DEN FORSVINDER. Størrelsen SKAL blive
   stående: kunden skal kunne se at 3XL findes på produktet, bare ikke i denne farve —
   ellers ser det ud som om trøjen slet ikke fås i 3XL, og hun leder ikke videre. */
.msd-size-tile.is-oos { opacity: .45; cursor: not-allowed; }
.msd-size-tile.is-oos .msd-size-name { text-decoration: line-through; }
.msd-size-tile.is-oos .msd-size-qty { cursor: not-allowed; color: var(--muted-fg); background: var(--muted-bg, #f4f4f6) !important; }
.msd-size-name { font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--fg); }
.msd-size-cell { position: relative; display: inline-flex; }
/* Tallet ER feltet: alle mål/flader har !important-TEMA-VÆRN. Målt 24/8: temaets globale
   input-styling (padding 0 11,6px + højde ~39px + kant + inset-skygge) vandt ellers —
   tallet blev klippet væk og felterne lignede tomme bokse. Lektien består i TETOS-udgaven. */
.msd-size-qty {
    width: 52px !important; height: 30px !important; min-height: 0 !important;
    padding: 0 6px !important; margin: 0 !important;
    border: 1px solid var(--border) !important; border-radius: var(--radius-sm);
    background: var(--card) !important; box-shadow: none !important;
    text-align: center;
    font-size: var(--fs-body) !important; line-height: 28px !important;
    font-weight: var(--fw-strong); color: var(--fg);
    -moz-appearance: textfield; appearance: textfield;
    transition: background .15s, border-color .15s;
}
.msd-size-qty::-webkit-outer-spin-button, .msd-size-qty::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.msd-size-tile.is-active .msd-size-qty {
    color: var(--pink-strong); background: var(--pink-soft) !important;
    border-color: var(--pink-border) !important;
}
/* Lager-badgen (TETOS-stil): grøn ≥10, gul <10, grå '0' ved udsolgt, '999+' over 999.
   Tallet er leverandørens eget (input.max) — se paintStock i buy-panel.js. */
.msd-size-stock {
    position: absolute; top: -7px; right: -5px; z-index: 2;
    font-size: 9px; line-height: 1; font-weight: 600;
    background: var(--pink-strong, #4a7d4f); color: #fff;
    padding: 2px 4px; border-radius: 6px; pointer-events: none;
}
.msd-size-stock.is-low { background: #b45309; }
.msd-size-stock.is-out { background: #c7c7cc; }
/* Den fastlåste række: overskriften kan ikke klikkes op/i — vis det. */
.msd-buy-fast .msd-buy-heading { cursor: default; }
.msd-buy-hint { margin: 2px 0 0; font-family: var(--font-ui); font-size: var(--fs-label); color: var(--muted-fg); }

/* ── Pris-boks + CTA ────────────────────────────────────────────────────────────────
   ⚠ `position: sticky` ER FJERNET HELT (v1.24.0, OPGAVE-editor-totrin del 3).
   Den klæbede mod panelets egen scroll, og når accordion'erne blev foldet sammen, havde
   den intet at klæbe til og faldt tilbage til midten af panelet. Det var symptomet i
   `OPGAVE-editor-ui.md` punkt 4; her forsvinder årsagen, fordi prisen slet ikke længere
   bor i venstre panel.

   ⚠ ELEMENTET BLIVER — kun visningen går. Foden er stadig editorens eneste beregnede
   pris-kilde: topbarens total spejler `.msd-buy-total` herfra. `.msd-buy-footer-parked`
   skjuler den, indtil del 5 giver indholdet et hjem i tilbudspanelet. */
#msd-buy-footer {
    margin: 8px 0 0; padding: 12px 16px 14px;
    display: flex; flex-direction: column; gap: 10px;
    background: var(--pink-tint); border-top: 1px solid var(--border);
    font-family: var(--font-ui);
}
/* ⚠ `display: none` ville også skjule den for en skærmlæser — men det er netop meningen:
   den er ikke information endnu, den er en kilde. Prisen ANNONCERES i topbaren, som er
   synlig hele tiden. */
#msd-buy-footer.msd-buy-footer-parked { display: none; }
.msd-buy-totals { display: flex; flex-direction: column; }
.msd-buy-meta  { font-size: var(--fs-label); color: var(--muted-fg); }
.msd-buy-total { font-size: var(--fs-display); font-weight: 700; color: var(--fg); line-height: 1.15; }
.msd-buy-sub   { font-size: var(--fs-label); color: var(--muted-fg); }
.msd-buy-ctas { display: flex; gap: 10px; }
/* CTA-udtryk = PRIMÆR-rollen. background/color !important = tema-værn: knappen bærer
   temaets `.button alt`-klasser (kurv-broen matcher på dem), og temaet maler den ellers
   i sin egen primærfarve (orange) — målt på tekstil-tryk-temaet 24/8. */
.msd-buy-ctas .msd-textile-cta {
    flex: 1 1 auto; min-width: 0; min-height: 0; margin: 0 !important;
    padding: 14px 12px !important; line-height: 1.2 !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--fs-base); font-weight: var(--fw-strong);
    background: var(--pink) !important; color: var(--on-pink) !important;
    border: 0; cursor: pointer;
    box-shadow: 0 2px 8px rgba(232, 132, 159, .4);
}
.msd-buy-ctas .msd-textile-cta:hover { background: var(--pink-hover) !important; }

/* ── v1.0.4: UPLOAD-DIALOGEN (Custom Ink-stil) ───────────────────────────────────────
   Modal over det eksisterende upload-flow. Genbruger .msd-guest-backdrop som skal;
   selve kortet har sit eget udtryk (tokens). Fil-inputtet ligger gennemsigtigt HEN OVER
   knappen — Safari-mønstret fra v1.170.1 (.msd-upload-zone). */
.msd-upload-dialog {
    position: relative;
    width: min(440px, calc(100vw - 32px));
    background: var(--card); border-radius: 16px;
    box-shadow: 0 20px 60px rgba(28, 28, 30, .35);
    padding: 24px 24px 20px;
    display: flex; flex-direction: column; gap: 16px;
    font-family: var(--font-ui);
}
.msd-upload-dialog-close {
    position: absolute; top: 10px; right: 12px;
    width: 32px; height: 32px; min-height: 0; margin: 0 !important; padding: 0;   /* tema-værn */
    border: 0; background: none; color: var(--muted-fg);
    font-size: 22px; line-height: 1; cursor: pointer; border-radius: var(--radius-sm);
}
.msd-upload-dialog-close:hover { color: var(--fg); background: var(--muted); }
.msd-upload-dialog-drop {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 26px 16px;
    border: 2px dashed var(--border); border-radius: var(--radius-md);
    transition: border-color .15s, background .15s;
}
.msd-upload-dialog-drop.msd-drag-over { border-color: var(--pink); background: var(--pink-tint); }
.msd-upload-dialog-btn {
    position: relative; overflow: hidden;              /* inputtet klippes til knappen */
    display: inline-flex; align-items: center; gap: 8px;
    padding: 13px 22px; border-radius: var(--radius-md);
    background: var(--pink); color: var(--on-pink);
    font-size: var(--fs-base); font-weight: var(--fw-strong);
    box-shadow: 0 2px 8px rgba(232, 132, 159, .4); cursor: pointer;
}
.msd-upload-dialog-btn:hover { background: var(--pink-hover); }
.msd-upload-dialog-input {
    position: absolute; inset: 0; width: 100%; height: 100%;
    opacity: 0; cursor: pointer; font-size: 100px;     /* stor hit-flade, også i Safari */
}
.msd-upload-dialog-or { font-size: var(--fs-body); color: var(--muted-fg); }
.msd-upload-dialog-hint {
    margin: 0; padding: 10px 12px;
    background: var(--muted); border-radius: var(--radius-sm);
    font-size: var(--fs-body); color: var(--fg); line-height: 1.45;
}
/* v1.149.0: telefon-vejen i upload-dialogen (QR-mobilbroen ind i det primære flow). */
.msd-upload-dialog-phone {
    display: block; margin: 10px auto 0; padding: 9px 18px;
    background: #fff; border: 1px solid #c9c9ce; border-radius: 10px;
    font-size: 14px; font-weight: 600; cursor: pointer; color: #2c2c2e;
}
.msd-upload-dialog-phone:hover { border-color: #8e8e93; }
.msd-upload-dialog-qr { padding: 10px 0 2px; }
.msd-upload-dialog-qr-img { border: 1px solid #e5e5ea; border-radius: 10px; }


/* ── v1.0.5: "REDIGER UPLOAD"-PANELET (tekstil-artwork): cm-mål, DPI-kvalitet, centrér ── */
.msd-artwork-panel { display: flex; flex-direction: column; gap: 10px; }
.msd-artwork-dims { display: flex; align-items: center; gap: 8px; }
.msd-artwork-field {
    display: inline-flex; align-items: center; gap: 4px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card);
    padding: 0 8px 0 0;
}
.msd-artwork-field input {
    width: 58px !important; height: 34px !important; min-height: 0 !important;   /* tema-værn (jf. qty-feltet) */
    padding: 0 0 0 8px !important; margin: 0 !important; border: 0 !important;
    background: none !important; box-shadow: none !important;
    font-size: var(--fs-base) !important; font-weight: var(--fw-strong); color: var(--fg); text-align: right;
}
.msd-artwork-field span { font-size: var(--fs-body); color: var(--muted-fg); }
.msd-artwork-x { color: var(--muted-fg); }
.msd-artwork-lock { display: inline-flex; color: var(--muted-fg); margin-left: 2px; }
/* v1.2.0: kvalitets-linjen, prikken og "Centrér" er flyttet ned i trykfil-panelets blok
   (nederst i filen) — dot-niveauerne hedder nu good/warn/bad og er var-drevne. */

/* ── v1.0.6: købspanelets sektioner er KNAPPER der folder ud (accordion m. resumé) ── */
#msd-buy-panel .msd-buy-heading {
    width: 100%; min-height: 0 !important; margin: 0 !important;                /* tema-værn */
    padding: 12px 12px; box-sizing: border-box;
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card);
    cursor: pointer; text-align: left;
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-ui); font-size: var(--fs-label); font-weight: var(--fw-strong);
    letter-spacing: .09em; color: var(--fg); text-transform: uppercase;
    transition: border-color .15s, background .15s;
}
#msd-buy-panel .msd-buy-heading:hover { border-color: var(--pink); }
#msd-buy-panel .msd-buy-section:not(.is-collapsed) .msd-buy-heading { border-color: var(--pink); background: var(--pink-tint); }
#msd-buy-panel .msd-buy-heading-text { flex: none; }
#msd-buy-panel .msd-buy-summary {
    flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-size: var(--fs-body); font-weight: var(--fw-normal); letter-spacing: 0; text-transform: none;
    color: var(--muted-fg); text-align: right;
}
#msd-buy-panel .msd-buy-section:not(.is-collapsed) .msd-buy-summary { color: var(--fg); }
#msd-buy-panel .msd-buy-color-chosen { display: none; }     /* resuméet i overskriften viser farven nu */
#msd-buy-panel .msd-buy-chevron { flex: none; display: inline-flex; color: var(--muted-fg); transition: transform .18s; }
#msd-buy-panel .msd-buy-section:not(.is-collapsed) .msd-buy-chevron { transform: rotate(180deg); color: var(--pink); }
/* ⚠ OGSÅ I TILBUDDET (v1.26.0). Reglen var bundet til `#msd-buy-panel`, og de samme
   sektioner flyttes til tilbudspanelet i trin 2 — dér gjorde `is-collapsed` ingenting, så
   rækkerne stod permanent foldet ud og kunne hverken åbnes eller lukkes. Klik-lytteren
   fulgte med flytningen; det var kun stilen der blev tilbage. Målt af John 28/8. */
#msd-buy-panel .msd-buy-section.is-collapsed > :not(.msd-buy-heading),
.msd-offer-panel .msd-buy-section.is-collapsed > :not(.msd-buy-heading) { display: none !important; }
.msd-offer-panel .msd-buy-section:not(.is-collapsed) .msd-buy-heading { border-color: var(--pink); background: var(--pink-tint); }
.msd-offer-panel .msd-buy-section:not(.is-collapsed) .msd-buy-chevron { transform: rotate(180deg); color: var(--pink); }
.msd-offer-panel .msd-buy-heading { cursor: pointer; }
#msd-buy-panel { gap: 10px; }

/* ── v1.0.6: INGEN "papir" bag trøjen på tekstil — lærredet er gennemsigtigt (canvas-init) og
   papir-looket (hvid flade, kant, skygge) på .lower-canvas slås fra. Trøjen står direkte på den
   grå editor-flade. Papir (.msd-kind-paper) er urørt. */
body.msd-kind-textile .msd-canvas-container .canvas-container > canvas.lower-canvas {
    background: transparent;
    border: 0;
    box-shadow: none;
}

/* v1.15.0 — OG HELLER INGEN GRÅ PLADE UNDER DEN (Johns note 27/8).
   v1.0.6 slog papir-looket fra på selve lærredet, men `.msd-canvas-container` malede
   stadig sin egen `#e8e8ed` med 12 px runde hjørner og 14 px padding — en 567 px kasse om
   et 539 px lærred, så der stod en grå ramme hele vejen rundt om trøjen.
   ⚠ DEN ER PAPIR-ARV, ikke pynt: reglens egen kommentar siger "lysegrå sideflade bag
   papiret … så papirets kant altid ses". På tekstil er der ingen papirkant at se — kun et
   fotografi af en trøje, der skal stå direkte på arbejdsfladen.
   `!important` fordi basisreglen selv bruger det. Papir (.msd-kind-paper) er urørt. */
body.msd-kind-textile .msd-canvas-container {
    background: transparent !important;
    padding: 0;
    border-radius: 0;
}

/* ── TO TRIN: DESIGN, SÅ PRIS (v1.25.0, OPGAVE-editor-totrin del 4-6) ───────────────
   Kunden designer først og ser prisen bagefter. `data-msd-step` på <body> er den ENE
   attribut der styrer hele overgangen — skinne og panel ud til venstre, lærredet smalner,
   tilbudspanelet ind fra højre.

   ⚠ TRØJEN BLIVER SIDDENDE. Kun venstre side glider ud. Flyttede vi hele siden, ville
   kunden miste det hun lige har lavet, netop som hun skal beslutte sig for at købe. */

body.msd-layout-v2 .msd-editor-shell {
    transition: grid-template-columns .34s cubic-bezier(.4, 0, .2, 1);
}
/* ⚠ KUN DESKTOP (v1.51.0, mobil-bid 1). Reglerne her omformer skallens GEOMETRI til
   glidepanel-modellen: venstre kolonner klemmes til 0, lærredet afgiver 490 px til panelet,
   og kort-skinnen flytter med ud. På mobil er tilbuddet et FULDSKÆRMS-overlay (100vw,
   @media 900 nedenfor) — dér er geometrien ikke bare unødvendig, den SPRÆNGTE skallen:
   MÅLT 31/8 på 375 px blev lærredet 502 px, skinnen 494 px, og bundknapperne knustes til
   lodrette strimler. Skjule-reglerne (visibility) forbliver globale — de fylder intet. */
@media (min-width: 901px) {
body.msd-layout-v2[data-msd-step="2"] .msd-editor-shell {
    grid-template-columns: 0 0 minmax(0, 1fr);
}
}
/* ⚠ `visibility`, IKKE `opacity` (målt i browseren 28/8). Tilbudspanelet ligger inde i
   `form.cart` og dermed inde i venstre panel; `opacity: 0` på en forfader gør ALLE
   efterkommere usynlige — også et `position: fixed`-barn. Panelet var der, men kunne ikke
   ses. `visibility` arves og kan derfor sættes tilbage på barnet. */
body.msd-layout-v2[data-msd-step="2"] .msd-rail2,
body.msd-layout-v2[data-msd-step="2"] .msd-panel2 {
    visibility: hidden; pointer-events: none; overflow: hidden;
}
body.msd-layout-v2[data-msd-step="2"] .msd-offer-panel { visibility: visible; pointer-events: auto; }
/* Lærredet skal give plads til tilbuddet, ellers står trøjen bag panelet. KUN desktop —
   på mobil dækker overlayet alligevel det hele, og de 490 px sprængte en 375 px skærm. */
@media (min-width: 901px) {
body.msd-layout-v2 .msd-region-canvas { transition: padding-right .34s cubic-bezier(.4, 0, .2, 1); }
body.msd-layout-v2[data-msd-step="2"] .msd-region-canvas { padding-right: calc(var(--tt-offer-w) + 20px); }
/* v1.50.0, Johns ønske 31/8: *"de 4 views må gerne kunne ses når Se din pris er åbnet —
   det skal flyttes, så det følger med, og vises lige til venstre for sammendraget."*
   Skinnen var aldrig SKJULT på trin 2 — den stod bare på right:14px BAG det faste
   tilbudspanel (490 px). Nu rykker den ud i lærredets reserverede stribe. */
body.msd-layout-v2[data-msd-step="2"] .msd-page-rail { right: calc(var(--tt-offer-w) + 34px); }
}

/* ── "Se din pris" ──────────────────────────────────────────────────────────────────
   ⚠ BRED, IKKE HØJ (Johns mål). Den er en overgang til næste trin, ikke en indstilling —
   derfor sidder den på lærredet og ikke i panelet.
   v1.50.0, Johns ønske 31/8: *"knappen skal være i hjørnet, ikke svæve midt i det hele"* —
   den står nu i lærredets nederste HØJRE hjørne — og frygten bag det gamle `right: 152px`
   var IKKE grundløs, den var bare permanent: MÅLT 31/8 rammer knappen kort-skinnen ved
   viewport-højder under ~740 px (skinnens bund ligger fast på ~630 px; knap-toppen når op
   på 596 ved 700 px høj skærm — 34 px overlap). Derfor: hjørnet når der ER et hjørne, og
   det gamle, sikre leje kun på de lave skærme hvor hjørnet ikke findes. */
body.msd-layout-v2 .msd-see-price {
    position: absolute; right: 26px; bottom: 26px; z-index: 8;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    /* v1.102.3 (Johns måling 4/9, ~15"-skærm): 58×340 var stor og klumpet — nu 44 høj og
       indholds-bred, så den ALTID kan stå i hjørnet under view-kortene. Dermed bortfalder
       152px-vigepladsen på lave skærme (regel 5): kollisionen fandtes kun pga. størrelsen
       (målt 31/8: 340 px bred nåede op i skinnen ved <740 px høj — 180 px gør ikke). */
    height: 44px; min-width: 0; padding: 0 22px;
    /* v1.59.1, Johns ønske 31/8: samme facon som "Læg i kurv" (radius-md), ikke pille. */
    border: 0; border-radius: var(--radius-md); cursor: pointer;
    background: var(--tt-orange); color: #fff;
    font-family: var(--font-ui); font-size: var(--fs-base); font-weight: var(--fw-strong);
    box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
    transition: background .18s, opacity .24s, visibility .24s, transform .18s;
    text-transform: none;
}
body.msd-layout-v2 .msd-see-price:hover { background: var(--tt-orange-strong); }
body.msd-layout-v2 .msd-see-price:active { transform: translateY(1px); }
/* v1.123.0 (Johns fund 6/9, lav skærm): "Kontakt os"-widgetten (My Sticky Elements) lægger
   en USYNLIG container i FULD bredde langs skærmens bund (målt i browseren: 1300×53 px,
   elementsFromPoint viste .mystickyelement-lists-wrap ØVERST) — og på lave skærme lander
   "Se din pris" (nederst i kort-skinnen) præcis i den. Klikket blev ædt; knappen så død ud.
   Containerne gøres klik-TRANSPARENTE, mens widgettens synlige indhold (fanen, knapper,
   links, felter) beholder sine klik. Scoped til editor-body — almindelige sider røres
   ikke. (Mobil-editoren skjuler hele widgetten — v1.145.0/v1.150.2 nedenfor.) */
body.msd-layout-v2 .mystickyelements-fixed,
body.msd-layout-v2 .mystickyelements-fixed .mystickyelement-lists-wrap { pointer-events: none; }
body.msd-layout-v2 .mystickyelements-fixed a,
body.msd-layout-v2 .mystickyelements-fixed button,
body.msd-layout-v2 .mystickyelements-fixed input,
body.msd-layout-v2 .mystickyelements-fixed textarea,
body.msd-layout-v2 .mystickyelements-fixed li { pointer-events: auto; }
/* På trin 2 er den irrelevant — og må ikke kunne rammes bag panelet.
   ⚠ `visibility`, ikke bare `opacity`. En knap med opacity 0 kan stadig tabbes til og
   læses op; kunden ville høre "Se din pris" i et panel hvor prisen allerede står. */
body.msd-layout-v2[data-msd-step="2"] .msd-see-price {
    opacity: 0; visibility: hidden; pointer-events: none;
}

/* ── Tilbudspanelet ─────────────────────────────────────────────────────────────────
   ⚠ LIGGER INDE I `form.cart` (se buy-panel.js). `position: fixed` løfter det visuelt ud
   i højre side, men i DOM'en bliver det i formularen — ellers ville `.msd-textile-cta`
   følge med ud, og kurv-broen (`closest('form.cart')`) ville miste knappen. */
/* v1.123.0 (Johns bestilling 6/9): panelet ÉN variabel bredere (+20 %) — lærredets
   padding og side-skinnens leje regner med i samme tal, så de tre aldrig glider fra
   hinanden igen (470/490/504 var tre håndholdte tal om samme geometri). */
body.msd-layout-v2 { --tt-offer-w: 564px; }
body.msd-layout-v2 .msd-offer-panel {
    position: fixed; top: var(--tt-topbar-h); right: 0; bottom: 0; z-index: 20;
    width: var(--tt-offer-w); max-width: 100vw;
    display: flex; flex-direction: column;
    background: var(--card); border-left: 1px solid var(--border);
    box-shadow: -8px 0 28px rgba(0, 0, 0, .10);
    transform: translateX(100%);
    transition: transform .34s cubic-bezier(.4, 0, .2, 1);
    font-family: var(--font-ui);
}
body.msd-layout-v2[data-msd-step="2"] .msd-offer-panel { transform: translateX(0); }
/* Skjult for tastatur og skærmlæser når det er ude af billedet — ellers kan man tabbe
   ind i et panel der ikke er der. */
body.msd-layout-v2:not([data-msd-step="2"]) .msd-offer-panel { visibility: hidden; }

body.msd-layout-v2 .msd-offer-head {
    display: flex; align-items: center; gap: 12px;
    padding: 16px 20px; border-bottom: 1px solid var(--border); flex: 0 0 auto;
}
body.msd-layout-v2 .msd-offer-back {
    display: inline-flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; flex: none; cursor: pointer;
    border: 1px solid var(--border); border-radius: 50%;
    background: var(--card); color: var(--fg);
}
body.msd-layout-v2 .msd-offer-back:hover { border-color: var(--pink); color: var(--pink-strong); }
body.msd-layout-v2 .msd-offer-title {
    margin: 0; font-size: var(--fs-title); font-weight: var(--fw-strong); color: var(--fg);
}
body.msd-layout-v2 .msd-offer-title:focus { outline: none; }

body.msd-layout-v2 .msd-offer-body {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 16px 20px; display: flex; flex-direction: column; gap: 12px;
}
body.msd-layout-v2 .msd-offer-foot {
    flex: 0 0 auto; padding: 14px 20px 18px; border-top: 1px solid var(--border);
    background: var(--card);
}
/* v1.123.0 (tre trin): v1.101.1's vige/pil-op-mekanik er AFLØST — foden bor på
   'levering'-trinnet, hvor ingen rækker kan lægge sig over den (regel 5: reglerne
   fjernet sammen med knappen). */
/* v1.104.0 (Johns flow 4/9): det ekstra "Gå til kurv"-link efter køb er FJERNET —
   købsknappen selv skifter navn (Næste Trin → Gå til kurven → Tilbage til kurv) og
   navigerer i kurv-tilstand. Én knap, ét næste skridt (regel 5). */

body.msd-layout-v2 .msd-offer-note {
    margin: 8px 0 0; text-align: center;
    font-size: var(--fs-label); color: var(--muted-fg);
}
/* Prisen fylder mest — det er dét kunden kom for. */
/* Leveringen står LIGE OVER købsknappen: datoen er det sidste kunden forholder sig til,
   før hun trykker. Foldet sammen viser den dato + "Haster det?"; ét klik åbner valgene. */
body.msd-layout-v2 .msd-offer-foot .msd-offer-slot[data-slot="levering"] { margin-bottom: 10px; }
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] {
    /* v1.94.0: 16px 18px → 12px 14px — boksen fyldte for meget (Johns måling 4/9). */
    padding: 12px 14px; border-radius: var(--radius-md);
    background: var(--pink-tint); border: 1px solid var(--border);
}
/* ── v1.62.0 — PRISBLOKKEN SOM UDKAST 1 (Johns endelige valg): totalen først som det ene
   store tal, én dæmpet linje med inkl. moms + antal + stykpris, og rabatten som rolig grøn
   boks med tynd fremdriftslinje. DOM-kontrakten er uændret (unitrow/meta/total spejles). */
/* v1.123.0 (Johns udkast C, godkendt 6/9): TO KOLONNER — totalerne venstre, udregningen
   højre bag en tynd streg, håndterings-linjen under udregningen i samme kolonne, og
   rabatten som ÉN slank bar i fuld bredde nederst. Målt: 222 px → ~135 px (−40 %).
   Samme DOM-noder som før (topbar-spejl + tests) — kun grid-placeringen er ny. */
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-totals {
    /* v1.123.0 (Johns inspiration 6/9, RushOrderTees-stil): STYKPRISEN er helten —
       stor og centreret, totalerne småt i parentes, og udregningen (Tekstiler/Tryk)
       er DROPPET fra visningen. Hero-linjerne males i refresh(); de gamle noder
       (total/label/sub/spec) består urørt bagved — topbaren og tests spejler dem.
       ⚠ FLEX + order, ikke DOM-rækkefølgen (Johns skærmbillede: rabat-baren og
       Ekspresgebyr stod ØVERST og lagde sig over hinanden — noderne blev født i en
       anden tid og en anden orden end hero-linjerne). */
    display: flex; flex-direction: column; text-align: center;
}
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-hero { order: 1; }
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-hero-ex { order: 2; }
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-hero-inkl { order: 3; }
/* ⚠ Gebyr-linjen RESERVERER sin plads, også når den er tom (Johns rettelse 6/9:
   leverings-kortene hoppede, når Ekspresgebyr-linjen kom til ved ekspres-valg —
   boksen voksede 29 px). visibility i stedet for display: højden er konstant. */
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-feeline {
    order: 4; display: flex !important; justify-content: center; gap: 8px;
    font-size: var(--fs-label, 11px); color: var(--muted-fg);
    /* v1.126.1 (Johns fund 7/9): basens 6px/2px-margener + fuld linjehøjde gav 26 px
       reserveret luft mellem Total og rabat-boksen. Reservationen består (ingen hop),
       men slankere: stram margen + egen linjehøjde. */
    margin: 2px 0 0; line-height: 1.2;
}
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-feeline[hidden] { visibility: hidden; }
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-discount { order: 5; margin-top: 4px; }
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-handling { order: 6; }
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-total,
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-total-label,
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-sub,
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-spec { display: none; }
body.msd-layout-v2 .msd-buy-hero { display: block; font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--fg); }
body.msd-layout-v2 .msd-buy-hero small { font-size: 15px; font-weight: 700; color: var(--muted-fg); }
/* v1.126.0 (Johns tekst): linje 2 = inkl-stykpris (mindre, grå), linje 3 = Total-linjen. */
body.msd-layout-v2 .msd-buy-hero-ex { display: block; font-size: 14px; color: var(--muted-fg); margin-top: 4px; }
body.msd-layout-v2 .msd-buy-hero-inkl { display: block; font-size: 14px; color: var(--fg); margin-top: 8px; }
body.msd-layout-v2 .msd-buy-hero-inkl b { font-weight: 800; }
body.msd-layout-v2 .msd-buy-hero-inkl span { color: var(--muted-fg); }
/* Udregningen: males stadig (data-spejlet består), men vises ikke længere. */
body.msd-layout-v2 .msd-buy-spec { display: flex; flex-direction: column; gap: 1px; }
body.msd-layout-v2 .msd-buy-spec-row {
    display: flex; justify-content: space-between; gap: 12px;
    font-size: var(--fs-label, 11px); color: var(--muted-fg, #8a8a8e); line-height: 1.45;
}
body.msd-layout-v2 .msd-buy-spec-row.is-rabat .msd-buy-spec-lbl,
body.msd-layout-v2 .msd-buy-spec-row.is-rabat .msd-buy-spec-val { color: var(--pink-strong, #5f7f62); font-weight: 600; }
body.msd-layout-v2 .msd-buy-spec-val { white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Håndteringsgebyr + gratis fragt: kurvens vilkår, som tekst — regnes ikke ind. */
body.msd-layout-v2 .msd-buy-handling {
    display: block; margin-top: 8px;
    font-size: var(--fs-label, 11px); color: var(--muted-fg, #8a8a8e); line-height: 1.4;
}
body.msd-layout-v2 .msd-buy-fragt { color: var(--pink-strong, #5f7f62); }
/* v1.123.0 (Johns valg 6/9): tilbage-knappen er RETUR i panelets top — flytningen til
   topbaren (v1.122.0) passede aldrig rigtigt ind, og med det bredere panel er der plads.
   (Genbruget af klassen .msd-tb-back kolliderede desuden med v1.102's "Tilbage til
   produktet"-link, som ejer navnet.) 'Dit tilbud'-titlen forbliver væk — prisen står
   først; head-rækken er nu en SLANK stribe med kun knappen. */
body.msd-layout-v2 .msd-offer-head { padding: 10px 20px; border-bottom: 0; }
body.msd-layout-v2 .msd-offer-title { display: none; }
body.msd-layout-v2 .msd-offer-back {
    width: auto; height: auto; border-radius: var(--radius-pill, 20px);
    gap: 6px; padding: 6px 14px 6px 10px;
    font-family: var(--font-ui, 'Inter', system-ui, sans-serif); font-size: var(--fs-body, 13px);
}
body.msd-layout-v2 .msd-offer-back svg { width: 14px; height: 14px; }
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-total {
    grid-area: total; font-size: 27px; font-weight: 800; color: var(--fg); line-height: 1.1;
}
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-total-label {
    grid-area: tlabel; font-size: var(--fs-label); color: var(--muted-fg); font-weight: 600;
}
/* v1.119.0: stykprisen på ekskl.-linjen — samme dæmpede tone som resten af linjen. */
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-unit-ex { font-weight: 600; white-space: nowrap; }
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-sub {
    /* v1.123.0 (udkast C): sub-linjen bor i VENSTRE kolonne — nowrap løb ind i
       udregningen; nu ombryder den i stedet (mockup'ens to linjer). */
    grid-area: sub; margin-top: 2px; font-size: 14px; color: var(--muted-fg); white-space: normal;
}
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-unitrow {
    /* v1.122.0: SKJULT — inkl.-linjen bærer selv antal + inkl-stykpris nu; rækken viste
       ekskl.-tal på inkl.-linjen (Johns fejl nr. 1). Noderne består (topbar-spejlet). */
    display: none;
}
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-unit-price { font-size: 14px; }
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-unit-label { font-size: 14px; color: var(--muted-fg); }
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-unitrow::before { content: '·'; }
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-meta::after { content: ' à'; }
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-unit-price { font-weight: 600; color: var(--muted-fg); }
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-discount { grid-area: disc; margin-top: 8px; }
body.msd-layout-v2 .msd-offer-slot[data-slot="pris"] .msd-buy-feeline { grid-area: fee; }
/* v1.123.0 (Johns rettelse 6/9: "tilbage til den oprindelige tynde bjælke"): rabatten
   som v1.119.0-boksen — lille sætning OVER den tynde bane. Dagens slanke bar-med-
   tekst-på blev bygget og valgt fra to gange; den kommer ikke igen. */
body.msd-layout-v2 .msd-buy-discount {
    background: var(--pink-soft, #eef3ee); border-radius: 8px; padding: 5px 8px 6px;
    margin-top: 10px; text-align: left;
}
body.msd-layout-v2 .msd-buy-discount-next { font-size: var(--fs-label, 11px); color: #3c5a3e; line-height: 1.3; }
body.msd-layout-v2 .msd-buy-discount-bar {
    height: 15px; border-radius: 8px; background: rgba(92, 122, 94, .18);
    margin-top: 3px; position: relative; overflow: hidden;
}
body.msd-layout-v2 .msd-buy-discount-fill {
    position: absolute; left: 0; top: 0; bottom: 0; min-width: 4px;
    background: var(--pink, #809f82); border-radius: 8px;
}
/* Opnået rabat: småt, midt på banen. Lys tekst-skygge → læsbar på både fyld og baggrund. */
body.msd-layout-v2 .msd-buy-discount-now {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    font-size: 10px; font-weight: 700; color: #274d2c; line-height: 1;
    text-shadow: 0 0 3px var(--card, #fff), 0 0 3px var(--card, #fff);
    pointer-events: none;
}
/* Loftet: småt, for enden af banen. */
body.msd-layout-v2 .msd-buy-discount-max {
    position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
    font-size: 10px; font-weight: 600; color: #3c5a3e; opacity: .75; line-height: 1;
    pointer-events: none;
}
body.msd-layout-v2 .msd-offer-slot:empty { display: none; }

/* ── v1.123.0: RESUMÉ-KORTET er nu ÉT SAMLET KORT (Johns mockup, godkendt 6/9) —
   trøjen med '✎ Ret farve' som fast knap nedenunder (kuglepennen er væk), navn +
   farve + 'I alt' på én linje, og størrelses-gitteret INDE i kortet i pladsen til
   højre for trøjen. ERSTATTER v1.95.0-kortet (regel 5). */
body.msd-layout-v2 .msd-offer-resume {
    display: flex; gap: 16px; align-items: flex-start;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    padding: 14px; font-family: var(--font-ui); background: var(--card);
}
body.msd-layout-v2 .msd-offer-resume[hidden] { display: none; }
body.msd-layout-v2 .msd-resume-left {
    flex: 0 0 96px; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
body.msd-layout-v2 .msd-resume-shirt {
    flex: 0 0 auto; width: 96px; height: 96px; display: block;
    padding: 0; margin: 0; border: 0; background: none;
}
body.msd-layout-v2 .msd-resume-shirt img { width: 100%; height: 100%; object-fit: contain; display: block; }
body.msd-layout-v2 .msd-resume-main { flex: 1 1 auto; min-width: 0; }
body.msd-layout-v2 .msd-resume-linje {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 2px 0 10px;
}
body.msd-layout-v2 .msd-resume-name { font-size: 13px; font-weight: 700; color: var(--fg); }
body.msd-layout-v2 .msd-resume-color { font-size: 12px; color: var(--muted-fg); }
body.msd-layout-v2 .msd-resume-total {
    margin-left: auto; font-size: 12px; font-weight: 600; color: var(--pink-strong, #4a7d4f);
}
/* v1.123.0 (tre trin): '✎ Ret farve' er FJERNET — farveprikkerne står synligt i kortet. */
/* Kortet ER rækkernes lukkede ansigt: i tilbuddets pladser skjules overskrifterne, og en
   LUKKET sektion forsvinder helt (ellers stod dens tomme ramme tilbage).
   v1.123.0: også størrelses-rækkens grønne bjælke — 'I alt' bor på kortets navnelinje. */
body.msd-layout-v2 .msd-offer-slot[data-slot="stoerrelser"] .msd-buy-heading,
body.msd-layout-v2 .msd-offer-slot[data-slot="farve"] .msd-buy-heading { display: none; }
body.msd-layout-v2 .msd-offer-slot[data-slot="stoerrelser"] .msd-buy-section.is-collapsed,
body.msd-layout-v2 .msd-offer-slot[data-slot="farve"] .msd-buy-section.is-collapsed { display: none; }
/* v1.123.0 (tre trin): sektionerne bor INDE i trinnets kort — ingen egen ramme.
   Gitteret (eget kort under farve-kortet) står i rækker à 6 (Johns mål: 12 størrelser
   = 2 fulde rækker; flere ombryder til 3.-4.). */
body.msd-layout-v2 .msd-offer-resume .msd-offer-slot .msd-buy-section,
body.msd-layout-v2 .msd-offer-kort .msd-offer-slot .msd-buy-section { border: 0; border-radius: 0; padding: 0; }
body.msd-layout-v2 .msd-offer-kort {
    border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px;
}
body.msd-layout-v2 .msd-offer-kort-sizes .msd-size-grid {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px 8px;
}
body.msd-layout-v2 .msd-offer-kort-sizes .msd-size-cell { width: 100%; }
body.msd-layout-v2 .msd-offer-kort-sizes .msd-size-qty { width: 100% !important; min-width: 44px; }
/* ── Trin-styringen: 'valg' viser kortene; 'levering' viser resumé-linje, prisblok og
   leveringstider (i kroppen). FODEN er der ALTID (Johns bestilling: knappen må aldrig
   hoppe) — den skifter kun indhold: [lille pris + Næste Trin] ↔ [tilbud + Læg i kurv].
   Kun visning — noderne flytter sig ikke. */
body.msd-layout-v2 .msd-offer-panel[data-tt-trin="valg"] .msd-offer-slot[data-slot="pris"],
body.msd-layout-v2 .msd-offer-panel[data-tt-trin="valg"] .msd-offer-slot[data-slot="levering"],
body.msd-layout-v2 .msd-offer-panel[data-tt-trin="valg"] .msd-offer-slot[data-slot="cta"] { display: none; }
body.msd-layout-v2 .msd-offer-panel[data-tt-trin="valg"] .msd-offer-note { visibility: hidden; }
body.msd-layout-v2 .msd-offer-panel[data-tt-trin="levering"] .msd-offer-resume,
body.msd-layout-v2 .msd-offer-panel[data-tt-trin="levering"] .msd-offer-kort-sizes,
body.msd-layout-v2 .msd-offer-panel[data-tt-trin="levering"] .msd-offer-valg-cta { display: none; }
/* Johns rettelse 6/9: leveringstiderne står FAST i bunden af kroppen (margin-top:auto
   i body-flexen) — vokser prisblokken (fx Ekspresgebyr-linjen), æder den luften i
   midten, og leverings-kortene bliver stående ved knappen i stedet for at hoppe. */
body.msd-layout-v2 .msd-offer-panel[data-tt-trin="levering"] .msd-offer-slot[data-slot="levering"] { margin-top: auto; }
/* Købsknappen står FAST i højre side af foden — samme mål som 'Næste Trin', så de to
   lander oven i hinanden. Tilbuds-linket bor til venstre for den. */
body.msd-layout-v2 .msd-region-right form.cart .msd-offer-slot .msd-textile-cta {
    width: 220px; flex: 0 0 220px; margin-left: auto;
}
body.msd-layout-v2 .msd-offer-slot .msd-buy-ctas { display: flex; align-items: center; gap: 14px; }
body.msd-layout-v2 .msd-offer-slot .msd-buy-ctas .msd-quote-link {
    order: -1; margin: 0; text-align: left; flex: 1 1 auto; min-width: 0;
    font-size: 12px; color: var(--muted-fg); background: none; border: 0; cursor: pointer;
    text-decoration: underline; font-family: var(--font-ui);
}
/* ── v1.132.0 — EKSPRES-POPUP'EN (Johns variant A): kurv-liste + valg ─────────────── */
body.msd-layout-v2 .msd-xp-dialog {
    background: var(--card, #fff); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.28);
    padding: 20px 22px; width: 460px; max-width: 94vw; font-family: var(--font-ui);
}
body.msd-layout-v2 .msd-xp-tekst { margin: 6px 0 10px; font-size: 13px; line-height: 1.45; color: var(--fg); }
body.msd-layout-v2 .msd-xp-liste {
    list-style: none; margin: 0 0 10px; padding: 8px 10px;
    border: 1px solid var(--border); border-radius: 10px;
}
body.msd-layout-v2 .msd-xp-linje { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: 12px; }
body.msd-layout-v2 .msd-xp-linje + .msd-xp-linje { border-top: 1px solid var(--border); }
body.msd-layout-v2 .msd-xp-thumb {
    width: 34px; height: 34px; border-radius: 6px; background: #eceff1; flex: none; overflow: hidden;
}
body.msd-layout-v2 .msd-xp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.msd-layout-v2 .msd-xp-txt { min-width: 0; }
body.msd-layout-v2 .msd-xp-tag { margin-left: auto; font-size: 11px; color: var(--muted-fg); white-space: nowrap; }
body.msd-layout-v2 .msd-xp-linje.is-denne .msd-xp-tag { color: var(--tt-orange, #c96f4a); font-weight: 700; }
body.msd-layout-v2 .msd-xp-spm { margin: 6px 0 0; font-size: 13px; line-height: 1.4; }
body.msd-layout-v2 .msd-xp-spm b { display: block; }
body.msd-layout-v2 .msd-xp-gebyr { color: var(--muted-fg); font-size: 12px; }
body.msd-layout-v2 .msd-xp-knapper { display: flex; gap: 10px; margin-top: 14px; }
body.msd-layout-v2 .msd-xp-knapper button { flex: 1 1 50%; }
body.msd-layout-v2 .msd-xp-fodnote {
    margin: 10px 0 0; font-size: 11.5px; color: var(--muted-fg); line-height: 1.4;
}
body.msd-layout-v2 .msd-xp-kurvlink { color: var(--pink-strong, #4a7d4f); font-weight: 600; text-decoration: underline; }

/* Trin-prikkerne i head-rækken. */
body.msd-layout-v2 .msd-offer-dots {
    margin-left: auto; display: flex; align-items: center; gap: 6px;
    font-family: var(--font-ui); font-size: 11px; color: var(--muted-fg);
}
body.msd-layout-v2 .msd-dot { width: 7px; height: 7px; border-radius: 50%; background: #d3d3d8; }
body.msd-layout-v2 .msd-dot.er { background: var(--pink-strong, #4a7d4f); }
/* v1.126.1 (Johns fund 7/9): prikkerne SKAL stå nøjagtigt samme sted på begge trin.
   Rækken er højrestillet, og teksten efter prikkerne skifter bredde ('Farve & antal'
   69 px, 'Levering & kurv' 83 px) — så prikkerne flyttede 14 px. Fast min-bredde på
   tekstens plads (≥ den bredeste, målt) låser prikkernes position. */
body.msd-layout-v2 .msd-offer-dots-txt {
    font-weight: 600; color: var(--pink-strong, #4a7d4f); margin-left: 2px;
    min-width: 88px; text-align: left;
}
/* Valg-trinnets fodrække: lille pris venstre, Næste Trin fast i højre side.
   ⚠ space-between, IKKE margin-left:auto — temaet nulstiller button-margin (målt:
   ml:0px trods auto), og så stod knappen 51 px fra kanten, mens Læg i kurv nåede den. */
body.msd-layout-v2 .msd-offer-valg-cta { display: flex; align-items: center; justify-content: space-between; gap: 14px; font-family: var(--font-ui); }
body.msd-layout-v2 .msd-offer-valg-pris { font-size: 13px; color: var(--muted-fg); }
body.msd-layout-v2 .msd-offer-valg-pris b { color: var(--fg); font-size: 16px; font-weight: 800; }
/* Samme mål OG samme typografi som købsknappen (Johns rettelse 6/9: "skal være som
   Læg i kurv") — fs-title/fw-strong, radius-md, og INGEN font-family: begge arver
   temaets knap-skrift, så de to er ens ned til bogstavet. */
body.msd-layout-v2 .msd-offer-next {
    background: var(--tt-orange); color: var(--card); border: 0; cursor: pointer;
    border-radius: var(--radius-md); padding: 0; width: 220px; flex: 0 0 220px;
    height: 54px !important; line-height: 54px;
    /* ⚠ !important som købsknappens egen regel — temaets button-vægt vandt ellers
       (målt: 400 mod Læg i kurv's 600). */
    font-size: var(--fs-title) !important; font-weight: var(--fw-strong) !important;
}
body.msd-layout-v2 .msd-offer-next:hover { background: var(--tt-orange-strong); }
/* Leverings-trinnets resumé-linje. */
body.msd-layout-v2 .msd-offer-linje {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-ui); font-size: 12px; color: var(--muted-fg);
}
body.msd-layout-v2 .msd-offer-linje[hidden] { display: none; }
/* (v1.123.0: linjens miniaturer blev valgt fra igen — kun tekst + '✎ Ret'.) */
body.msd-layout-v2 .msd-offer-linje b { color: var(--fg); }
body.msd-layout-v2 .msd-offer-linje-ret {
    margin-left: auto; border: 0; background: none; cursor: pointer;
    font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--pink-strong, #4a7d4f);
}
/* v1.126.0: størrelses-linjen under resuméet — "Størrelser: S: 2 · M: 3 …".
   v1.126.1 (Johns fund 7/9): den skal stå LIGE under navnelinjen — body'ens
   flex-gap (12 px) modregnes, og bund-margenen udgår (gap'et bærer afstanden ned
   til prisboksen alene). */
body.msd-layout-v2 .msd-offer-linje-str {
    font-family: var(--font-ui); font-size: 12px; color: var(--muted-fg);
    margin: -10px 0 0;
}
body.msd-layout-v2 .msd-offer-linje-str[hidden] { display: none; }
body.msd-layout-v2 .msd-offer-linje-str b { color: var(--fg); font-weight: 600; }
/* Op/ned-pilene i antals-feltet (Johns rettelse 6/9): lodret par i feltets højre kant. */
body.msd-layout-v2 .msd-size-spin {
    position: absolute; right: 3px; top: 3px; bottom: 3px; width: 14px;
    display: flex; flex-direction: column; z-index: 1;
}
body.msd-layout-v2 .msd-size-spin button {
    flex: 1 1 50%; width: 14px !important; min-width: 0 !important; max-width: none !important;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    padding: 0 !important; margin: 0 !important; border: 0 !important;
    background: none !important; box-shadow: none !important;
    font-size: 7px; line-height: 1; color: var(--muted-fg); cursor: pointer;
}
body.msd-layout-v2 .msd-size-spin button:hover { color: var(--pink-strong, #4a7d4f); }
body.msd-layout-v2 .msd-size-spin button:disabled { cursor: not-allowed; color: #c7c7cc; }
body.msd-layout-v2 .msd-size-qty { padding-right: 18px !important; }
/* De flyttede sektioner er de SAMME noder som i venstre panel; her får de bare panelets
   egen bredde og en ramme, så de læses som rækker i et tilbud. */
body.msd-layout-v2 .msd-offer-slot .msd-buy-section {
    border: 1px solid var(--border); border-radius: var(--radius-md); padding: 4px 12px 10px;
}
body.msd-layout-v2 .msd-offer-slot .msd-buy-ctas { display: flex; }
/* ⚠ SPECIFICITET, IKKE `!important` ALENE. `.msd-region-right form.cart .msd-textile-cta`
   skjuler knappen i venstre panel med `display: none !important` og har ét element mere
   end en kort selektor her — så min regel tabte, og tilbuddet stod uden købsknap. Vi
   matcher derfor den fulde kæde og lægger `.msd-offer-slot` oveni. */
body.msd-layout-v2 .msd-region-right form.cart .msd-offer-slot .msd-textile-cta {
    display: block !important; width: 100%;
    background: var(--tt-orange) !important; border-color: var(--tt-orange) !important;
    color: var(--card) !important;
    height: 54px !important; line-height: 54px !important; padding: 0 !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--fs-title) !important; font-weight: var(--fw-strong) !important;
}
body.msd-layout-v2 .msd-region-right form.cart .msd-offer-slot .msd-textile-cta:hover { background: var(--tt-orange-strong) !important; }
/* v1.105.1: "(ingen ændringer)"-underteksten på kurv-tilstandens knap — med småt, under. */
body.msd-layout-v2 .msd-textile-cta small {
    display: block; font-size: var(--fs-label); font-weight: var(--fw-normal);
    line-height: 1.1; opacity: .85;
}

@media (max-width: 900px) {
    /* ⚠ v1.51.0 (mobil-bid 1). `width: 100vw; top: 0` VIRKEDE ALDRIG: højre region er på
       mobil et bundark med en PERMANENT transform (translateY(110%) skjult / 0 åben), og en
       transformeret forfader bliver ankeret for `position: fixed` — panelet landede på
       y=868 på en 812 px skærm (målt med fælde 31/8), altså UNDER skærmen, mens desktop-
       geometrien (padding-right 490 px, grid 0 0 1fr) samtidig sprængte skallen.
       DOM-flytning er forbudt (kurv-broen kræver panelet i `form.cart`), så på mobil bliver
       tilbuddet en del af ARKET: arket glider op i FULD højde, og panelet fylder det
       absolut. Panelets egen translateX-glidning består uændret. */
    body.msd-layout-v2[data-msd-step="2"] .msd-region-right {
        transform: translateY(0); top: 0; max-height: none; height: 100svh;
        overflow: hidden; border-radius: 0;
    }
    body.msd-layout-v2 .msd-offer-panel {
        position: absolute; top: 0; right: 0; bottom: 0; left: 0;
        width: auto; overflow-y: auto;
    }
    body.msd-layout-v2 .msd-see-price { right: 14px; left: 14px; min-width: 0; }

}

/* ── VAREPRØVE UDEN TRYK (v1.23.0, OPGAVE-editor-totrin del 2) ──────────────────────
   Kontakten sad før i et trykområde-kort. Den er nu et selvstændigt, ALTID SYNLIGT valg
   under størrelses- og antalsvælgeren (Johns krav).
   ⚠ Farven er advarsel, ikke fejl: kunden har valgt det med vilje, og valget kan fortrydes
   med ét tryk. Derfor okker (#A9761E), ikke rød. */
.msd-sample {
    display: flex; align-items: center; gap: 13px; width: 100%;
    padding: 13px 14px; margin-top: 12px;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    background: var(--muted-bg, #f7f7fa); cursor: pointer; text-align: left;
    font-family: var(--font-ui); color: var(--fg);
    transition: border-color .2s, background .2s;
}
.msd-sample.is-on { border-color: #A9761E; background: #FBF3E4; }
.msd-sample-txt { flex: 1; min-width: 0; }
.msd-sample-txt b { display: block; font-size: var(--fs-body); font-weight: var(--fw-strong); }
.msd-sample-sub { display: block; font-size: var(--fs-label); color: var(--muted-fg); line-height: 1.35; }
.msd-sample.is-on .msd-sample-sub { color: #A9761E; }
.msd-sample-tog {
    flex: none; position: relative; width: 46px; height: 26px;
    border-radius: var(--radius-pill); background: var(--border); transition: background .22s;
}
.msd-sample-tog::after {
    content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .22s;
}
.msd-sample.is-on .msd-sample-tog { background: #A9761E; }
.msd-sample.is-on .msd-sample-tog::after { transform: translateX(20px); }

/* ⚠ LÅST, IKKE SLETTET. Designet bliver liggende — det er hele pointen ved at låse.
   Gråtoningen siger "det her bliver ikke trykt", ikke "det er væk". */
body[data-msd-sample="1"] .msd-canvas-container .canvas-container { filter: grayscale(1) opacity(.3); }
body[data-msd-sample="1"] .msd-page-rail .msd-page-thumb { filter: grayscale(1); opacity: .5; }
body[data-msd-sample="1"] .msd-page-rail .msd-footer-page { position: relative; }
body[data-msd-sample="1"] .msd-page-rail .msd-footer-page::after {
    content: "🔒"; position: absolute; right: 6px; bottom: 22px;
    width: 19px; height: 19px; border-radius: 50%;
    background: var(--muted-fg); color: var(--card);
    font-size: var(--fs-label); line-height: 19px; text-align: center;
}
/* Mærkatet på trøjen. Samme ord som produktsidens eget "Vareprøve uden tryk / tages ikke
   retur", så kunden møder den samme formulering to steder. */
body[data-msd-sample="1"] .msd-region-canvas::after {
    content: "VAREPRØVE UDEN TRYK\A tages ikke retur";
    white-space: pre; text-align: center;
    position: absolute; left: 50%; top: 41%; transform: translate(-50%, -50%) rotate(-6deg);
    padding: 11px 18px; border: 2.5px dashed #A9761E; border-radius: 10px;
    background: rgba(255,255,255,.9); color: #A9761E;
    font-family: var(--font-ui); font-weight: 800; font-size: 15px; line-height: 1.5;
    pointer-events: none; z-index: 7;
}

/* ── v1.0.7: trykområder afledt af designet — kort som indikatorer, hint, skift-toast ── */
.msd-area-auto-hint { margin: 2px 0 0; font-size: var(--fs-body); color: var(--muted-fg); }
.msd-area-toast {
    position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(.96);
    z-index: 100000; max-width: min(420px, calc(100vw - 40px));
    padding: 16px 20px; border-radius: var(--radius-md);
    background: var(--fg); color: #fff; font-family: var(--font-ui); font-size: var(--fs-base);
    font-weight: var(--fw-strong); text-align: center; line-height: 1.4;
    box-shadow: 0 16px 48px rgba(0,0,0,.3);
    opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
}
.msd-area-toast.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ── v1.0.7: footer — stykpris tydeligt + rabat-bar ── */
.msd-buy-unitrow { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.msd-buy-unit { font-family: var(--font-ui); color: var(--fg); }
.msd-buy-unit-price { font-size: var(--fs-title); font-weight: var(--fw-strong); }
.msd-buy-unit-label { font-size: var(--fs-body); color: var(--muted-fg); }
.msd-buy-discount { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 4px; font-family: var(--font-ui); }
.msd-buy-discount-head { display: flex; justify-content: space-between; font-size: var(--fs-body); color: var(--muted-fg); }
.msd-buy-discount-pct { font-weight: var(--fw-strong); color: var(--fg); }
.msd-buy-discount-bar { position: relative; height: 8px; border-radius: 999px; background: var(--border); overflow: visible; }
.msd-buy-discount-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--pink), #1f9d55); transition: width .25s; }
.msd-buy-discount-marks { position: absolute; inset: 0; pointer-events: none; }
.msd-buy-discount-mark { position: absolute; top: -3px; width: 2px; height: 14px; background: var(--card); transform: translateX(-1px); }
.msd-buy-discount-mark::after {
    content: attr(data-label); position: absolute; top: 15px; left: 50%; transform: translateX(-50%);
    font-size: 10px; color: var(--muted-fg); white-space: nowrap;
}
.msd-buy-discount-next { margin-top: 14px; font-size: var(--fs-body); color: var(--muted-fg); }
/* v1.0.8: vareprøve til → trykområde-kortene dæmpes (tøjet sendes uden tryk) */
.msd-area-card.is-sample-off { opacity: .45; }

/* ── v1.93.0: leveringstid som TRE KORT ved siden af hinanden (Johns mockup 4/9) ──
   Accordionen er væk — alt står synligt: type, dage med stort, gebyr med fed, dato
   med småt. Det valgte kort får grøn ramme, grøn tone og et flueben i hjørnet. */
.msd-delivery { margin: 0 0 10px; }
/* v1.94.0: fristen med nedtælling der hvor "Leveringstid" stod (Johns ønske 4/9). */
.msd-delivery-deadline {
    display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
    font-family: var(--font-ui); font-size: 12px; color: var(--muted-fg); margin: 0 2px 8px;
}
.msd-delivery-deadline strong { color: var(--fg); font-weight: var(--fw-strong); }
.msd-delivery-deadline-count {
    font-weight: var(--fw-strong); color: var(--pink-text, var(--pink));
    white-space: nowrap; font-variant-numeric: tabular-nums;
}
/* padding-top/margin-top: fluebenet rager 8px op over kortene — gitteret lægger luften
   til selv, så det ikke klippes af et rullende panel. Nettohøjden er uændret. */
.msd-delivery-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-top: 8px; margin-top: -8px; }
.msd-delivery-choice {
    position: relative;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    /* v1.94.0: ~30 % lavere (Johns måling 4/9) — mindre luft og mindre tal, samme indhold. */
    min-width: 0; min-height: 0 !important; margin: 0 !important; padding: 8px 6px 8px; box-sizing: border-box;  /* tema-værn */
    border: 2px solid var(--border); border-radius: var(--radius-md); background: var(--card);
    font-family: var(--font-ui); font-size: var(--fs-body); line-height: 1.25; color: var(--fg);
    cursor: pointer; text-align: center;
    transition: border-color .15s, background .15s;
}
.msd-delivery-kind {
    font-size: var(--fs-label); font-weight: var(--fw-strong);
    letter-spacing: .05em; text-transform: uppercase; color: var(--muted-fg);
}
.msd-delivery-days { display: flex; flex-direction: row; align-items: baseline; justify-content: center; gap: 4px; line-height: 1.05; }
.msd-delivery-days strong { font-size: 18px; font-weight: 800; }
.msd-delivery-days small { font-size: 11px; font-weight: var(--fw-strong); color: var(--muted-fg); }
.msd-delivery-choice-fee { font-weight: var(--fw-strong); font-size: 12px; margin-top: 2px; white-space: nowrap; }
.msd-delivery-choice-fee.is-gratis { color: #4e6b50; }
.msd-delivery-choice-date { color: var(--muted-fg); font-size: 10px; line-height: 1.3; margin-top: 2px; }
.msd-delivery-choice:hover { border-color: var(--pink); }
.msd-delivery-choice.is-selected { border-color: var(--pink); background: var(--pink-tint); }
.msd-delivery-choice.is-selected .msd-delivery-kind { color: var(--pink-text, var(--pink)); }
.msd-delivery-check {
    position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%;
    background: var(--pink); color: var(--on-pink, #fff); font-size: 13px; line-height: 22px;
    font-weight: 700; display: none; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.msd-delivery-choice.is-selected .msd-delivery-check { display: block; }
.msd-delivery-gls { font-family: var(--font-ui); font-size: var(--fs-label); color: var(--muted-fg); text-align: center; margin-top: 8px; }
.msd-buy-feeline { display: flex; justify-content: space-between; font-family: var(--font-ui); font-size: var(--fs-body); color: var(--fg); margin: 6px 0 2px; }
.msd-buy-feeline-amount { font-weight: var(--fw-strong); }

/* ── v1.1.0: "FJERN BAGGRUND" — knap i billed-panelet + popup m. checkerboard ── */
.msd-bg-remove-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; min-height: 0 !important; margin: 0 0 10px !important; padding: 10px 12px;   /* tema-værn */
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card);
    color: var(--fg); font-family: var(--font-ui); font-size: var(--fs-body); font-weight: var(--fw-strong); cursor: pointer;
}
.msd-bg-remove-btn:hover { border-color: var(--pink); color: var(--pink-text, var(--pink)); }
/* v1.238.0: fortryd-krydset — lille rødt ✕ i knappens kant, kun når baggrunden ER fjernet
   (JS sætter [hidden] ellers). Knappen er relativ, så krydset kan sidde i hjørnet. */
.msd-bg-remove-btn { position: relative; }
.msd-bg-undo {
    position: absolute; top: -7px; right: -7px; width: 20px; height: 20px; border-radius: 50%;
    background: #d0342c; color: #fff; border: 1.5px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
    font-size: 11px; line-height: 17px; text-align: center; font-weight: 700; cursor: pointer;
}
.msd-bg-undo:hover { background: #b02a23; }
/* v1.2.0: i det nye layout bærer knappen ogsaa .msd-artwork-treatment (behandlings-rækken i
   trykfil-panelet). Den rækkes egne regler skal vinde over den gamle fuld-bredde-stil. */
body.msd-layout-v2 .msd-bg-remove-btn.msd-artwork-treatment {
    width: 100%; justify-content: flex-start; margin: 0 !important; padding: 11px 12px;
}
.msd-bg-dialog {
    position: relative; width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto;
    background: var(--card); border-radius: 16px; box-shadow: 0 20px 60px rgba(28,28,30,.35);
    padding: 24px; display: flex; flex-direction: column; gap: 14px; font-family: var(--font-ui);
}
.msd-bg-intro { margin: 0; }
/* v1.268.28: vejledningslinket i forklaringen + det udfoldede panel (video + tre trin). */
.msd-bg-tip-link { display: inline-flex; align-items: center; gap: 5px; color: var(--tt-gron, #5f8a6b); font-weight: 700; text-decoration: none; white-space: nowrap; }
.msd-bg-tip-link:hover { text-decoration: underline; }
.msd-bg-tip { border: 1px solid #d7dfd9; background: #f3f6f4; border-radius: 10px; padding: 10px 12px; display: flex; gap: 14px; align-items: flex-start; }
.msd-bg-tip[hidden] { display: none; }
.msd-bg-tip-video { flex: 0 0 300px; max-width: 48%; border-radius: 8px; overflow: hidden; background: #000; position: relative; }
.msd-bg-tip-video video { display: block; width: 100%; height: auto; }
.msd-bg-tip-badge { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; padding: 2px 7px; border-radius: 5px; }
.msd-bg-tip-text { flex: 1; min-width: 0; font-size: 14px; line-height: 1.45; color: var(--fg, #16181a); }
.msd-bg-tip-text > strong { display: block; margin-bottom: 6px; }
.msd-bg-tip-trin { display: flex; gap: 8px; margin-bottom: 5px; }
.msd-bg-tip-trin > span:first-child { flex: 0 0 22px; height: 22px; border-radius: 50%; background: var(--tt-gron, #5f8a6b); color: #fff; font-weight: 700; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.msd-bg-tip-luk { margin-top: 6px; background: none; border: 0; color: var(--tt-gron, #5f8a6b); font-weight: 700; cursor: pointer; padding: 0; font-size: 13px; font-family: inherit; }
@media (max-width: 600px) { .msd-bg-tip { flex-direction: column; } .msd-bg-tip-video { flex: none; max-width: 100%; width: 100%; } }
.msd-bg-stage {
    position: relative; display: flex; align-items: center; justify-content: center;
    /* v1.90.4 (Johns fund 3/9): dialogens flex-kolonne KLEMTE stagen ned til min-height,
       da intro-teksten (v1.88) og prøve-baggrundene (v1.84) gjorde det samlede indhold
       højere end dialog-loftet — billedet blev klippet i top og bund. flex-shrink: 0
       freder stagen; billedets eget loft (på canvas) tager i stedet højde for resten. */
    flex: 0 0 auto;
    min-height: 120px; border-radius: var(--radius-md); overflow: hidden;
    /* checkerboard = gennemsigtighed synlig */
    background-color: #fff;
    background-image: linear-gradient(45deg, #d9d9de 25%, transparent 25%), linear-gradient(-45deg, #d9d9de 25%, transparent 25%),
                      linear-gradient(45deg, transparent 75%, #d9d9de 75%), linear-gradient(-45deg, transparent 75%, #d9d9de 75%);
    background-size: 16px 16px; background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.msd-bg-canvas {
    max-width: 100%; width: auto; height: auto; display: block; cursor: crosshair;
    /* Loftet giver plads til dialogens FASTE indhold (intro, slider, knapper, prøver
       — ca. 460 px), så HELE billedet altid kan ses uden at noget klippes. */
    max-height: min(55vh, calc(100vh - 460px));
}
/* v1.89.0: zoom-knapperne — lodret stak i stagens hjørne, over canvas'en. */
.msd-bg-zoomer {
    position: absolute; top: 8px; right: 8px; z-index: 3;
    display: flex; flex-direction: column; gap: 4px;
}
.msd-bg-zoomer button {
    width: 30px; height: 30px; padding: 0; cursor: pointer;
    font-size: 15px; line-height: 1; font-weight: 600;
    background: #fff; color: var(--fg, #1c1c1e);
    border: 1px solid var(--border, #dcdcde); border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.msd-bg-zoomer button:hover { border-color: var(--pink, #c14878); }
.msd-bg-zoomer [data-z="nulstil"] { font-size: 11px; }
/* v1.88.0 picker: "Fortryd klik" — samme lette udtryk som Vis original-knappen. */
.msd-bg-undo-click {
    margin-left: 8px; padding: 6px 12px; cursor: pointer; font-size: 0.85rem;
    background: #fff; border: 1px solid var(--border, #dcdcde); border-radius: 8px;
}
.msd-bg-undo-click:hover { border-color: var(--pink, #c14878); }
/* v1.84.0 (Johns ønske 3/9): samme fire prøve-baggrunde som AI-dialogen, så man kan SE
   hvor baggrunden er fjernet. data-bg sættes af JS; 'ternet' er stagens egen default. */
.msd-bg-stage[data-bg="hvid"]    { background: #ffffff; }
.msd-bg-stage[data-bg="sort"]    { background: #000000; }
/* v1.238.1: magenta-prøven er erstattet af trøjens farve — sat inline (levende hex), ingen regel her. */
.msd-bg-busy {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,.7); font-weight: var(--fw-strong); color: var(--fg);
}
.msd-bg-busy[hidden] { display: none; }
.msd-bg-controls { display: flex; flex-direction: column; gap: 8px; }
.msd-bg-slider-label { display: flex; justify-content: space-between; font-size: var(--fs-body); color: var(--fg); font-weight: var(--fw-strong); }
.msd-bg-slider { width: 100%; accent-color: var(--pink); margin: 0; }
.msd-bg-toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.msd-bg-compare {
    min-height: 0 !important; margin: 0 !important; padding: 6px 10px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card);
    font-family: var(--font-ui); font-size: var(--fs-body); color: var(--fg); cursor: pointer;
}
.msd-bg-compare[aria-pressed="true"] { border-color: var(--pink); background: var(--pink-tint); }
.msd-bg-stat { font-size: var(--fs-body); color: var(--muted-fg); }
/* v1.268.62: ø-forslaget — "N lukkede områder har samme farve som baggrunden". Magenta som rammerne i previewet (John: 100 % magenta). */
.msd-bg-oeer {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px;
    padding: 8px 12px; border-left: 3px solid #ff00ff; border-radius: var(--radius-sm);
    background: #fdeefd; font-size: var(--fs-body); color: var(--fg);
}
.msd-bg-oeer[hidden] { display: none; }
.msd-bg-oeer-knapper { display: flex; gap: 8px; }
.msd-bg-oeer-btn {
    min-height: 0 !important; margin: 0 !important; padding: 6px 12px; cursor: pointer;
    font-family: var(--font-ui); font-size: 0.85rem; font-weight: var(--fw-strong);
    border: 1px solid var(--border, #dcdcde); border-radius: 8px; background: #fff; color: var(--fg);
}
.msd-bg-oeer-fjern { background: #ff00ff; border-color: #ff00ff; color: #fff; }
.msd-bg-oeer-fjern:hover { background: #d400d4; border-color: #d400d4; }
.msd-bg-oeer-behold:hover { border-color: var(--pink, #c14878); }

/* ════════════════════════════════════════════════════════════════════════════
   v1.2.0 — NYT EDITOR-LAYOUT (OPGAVE-nyt-layout, CustomInk-anatomien)

   Scope: body.msd-layout-v2 (kun tekstil + editor — se MSD_Frontend::layout_v2).
   Papir-editoren rammes ALDRIG af en regel herunder.

   Anatomi (desktop, ≥901px):
       ┌──────────────────────────────────────────────── topbar 64 ┐
       │ skinne 86 │ panel 400 │            lærred 1fr             │
       └───────────────────────────────────────────────────────────┘
   Strukturen står i @media (min-width: 901px), fordi den EKSISTERENDE mobil-query
   (≤900px) definerer sine egne grid-areas og skal blive ved med at vinde. Mobilen
   er sin egen opgave; her sørger vi kun for at den ikke knækker.
   ════════════════════════════════════════════════════════════════════════════ */

@media (min-width: 901px) {

body.msd-layout-v2 .msd-editor-shell {
    grid-template-areas:
        "header header header"
        "left   right  canvas";
    grid-template-rows: var(--tt-topbar-h) minmax(0, 1fr);
    grid-template-columns: var(--tt-rail-w) var(--tt-panel-w) minmax(0, 1fr);
}
/* Subbar og side-fane-bar er tømt af editor-layout.js (Fortryd/Gentag + zoom → lærredets
   flydende boks, sidefaner → sidekortene, #msd-actions → panelets fod). Tomme regioner
   må ikke efterlade en stribe. */
body.msd-layout-v2 .msd-region-subbar,
body.msd-layout-v2 .msd-region-pagebar { display: none; }

/* ── TOPBAR ─────────────────────────────────────────────────────────────────── */
body.msd-layout-v2 .msd-topbar2 {
    display: flex; align-items: center; gap: 18px; padding: 0 20px;
    background: var(--card); border-bottom: 1px solid var(--border);
    font-family: var(--font-ui);
}
body.msd-layout-v2 .msd-tb-logo { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
body.msd-layout-v2 .msd-tb-logo img { display: block; height: 34px; width: auto; max-width: 190px; object-fit: contain; }
body.msd-layout-v2 .msd-tb-logo-text {
    font-family: var(--font-display); font-weight: var(--fw-strong); font-size: var(--fs-title); color: var(--pink-strong);
}
body.msd-layout-v2 .msd-tb-product {
    display: flex; flex-direction: column; min-width: 0; line-height: 1.25;
    font-size: var(--fs-label); color: var(--muted-fg);
}
body.msd-layout-v2 .msd-tb-product-name {
    font-size: var(--fs-body); color: var(--fg-soft); font-weight: var(--fw-strong);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* v1.102.0 (Johns ønske 4/9): lille vej tilbage til produktsiden, under produktnavnet. */
body.msd-layout-v2 .msd-tb-back {
    font-size: var(--fs-label); color: var(--muted-fg); text-decoration: none;
    white-space: nowrap; margin-top: 1px;
}
body.msd-layout-v2 .msd-tb-back:hover { color: var(--pink-text, var(--pink)); text-decoration: underline; }
/* I ordre-tilstand er "tilbage" ordre-banneret — ikke produktsiden. */
body.msd-order-edit .msd-tb-back { display: none; }

body.msd-layout-v2 .msd-tb-spacer { flex: 1 1 auto; }

body.msd-layout-v2 .msd-tb-delivery { display: flex; align-items: center; gap: 9px; color: var(--fg-soft); }
body.msd-layout-v2 .msd-tb-delivery svg { flex: 0 0 auto; color: var(--muted-fg); }
body.msd-layout-v2 .msd-tb-delivery-texts { display: flex; flex-direction: column; line-height: 1.3; }
body.msd-layout-v2 .msd-tb-delivery-main { font-size: var(--fs-body); }
body.msd-layout-v2 .msd-tb-delivery-main strong { color: var(--fg); font-weight: var(--fw-strong); }
body.msd-layout-v2 .msd-tb-rush {
    font-size: var(--fs-label); color: var(--pink-strong); text-decoration: none; font-weight: var(--fw-strong);
    /* Den er en <button> når der ER et ekspres-valg at åbne, og et <a> ellers — samme udtryk. */
    background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left;
    font-family: var(--font-ui);
}
body.msd-layout-v2 .msd-tb-rush:hover { color: var(--pink-strong-hover); text-decoration: underline; }

/* Ekspres-valget som popover under leveringsblokken. Indholdet ER købspanelets egen
   leveringsboks (flyttet hertil af editor-layout.js) — kun rammen er ny. */
body.msd-layout-v2 .msd-tb-delivery { position: relative; }
body.msd-layout-v2 .msd-tb-delivery-pop {
    position: absolute; top: calc(100% + 10px); right: 0; z-index: 40;
    width: 380px; max-width: calc(100vw - 32px); padding: 16px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
    box-shadow: 0 12px 34px rgba(0,0,0,.16);
    font-family: var(--font-ui); text-align: left; cursor: default;
}
body.msd-layout-v2 .msd-tb-delivery-pop[hidden] { display: none; }
body.msd-layout-v2 .msd-tb-pop-title {
    margin: 0 0 10px; font-size: var(--fs-base); font-weight: var(--fw-strong); color: var(--fg);
}
/* v1.93.0: kort-designet gælder også her — samme node, samme tre kort. Fristen med
   nedtælling (v1.94.0) vises OGSÅ her: den er ny information, ikke en gentagelse. */
body.msd-layout-v2 .msd-tb-delivery-pop .msd-delivery { margin: 0; border: 0; padding: 0; background: none; }

/* Prisberegningen i popoveren — tekst-kopi af hjørnets pris-boks (samme tal, samme kilde). */
body.msd-layout-v2 .msd-tb-pop-sum {
    margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--border);
}
body.msd-layout-v2 .msd-tb-pop-fee {
    display: flex; justify-content: space-between; gap: 10px;
    font-size: var(--fs-body); color: var(--fg-soft); margin: 0 0 4px;
}
body.msd-layout-v2 .msd-tb-pop-fee[hidden] { display: none; }
body.msd-layout-v2 .msd-tb-pop-fee-amount { font-weight: var(--fw-strong); color: var(--fg); }
body.msd-layout-v2 .msd-tb-pop-row {
    display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
}
body.msd-layout-v2 .msd-tb-pop-unit { font-size: var(--fs-body); color: var(--muted-fg); }
body.msd-layout-v2 .msd-tb-pop-total { font-size: var(--fs-title); font-weight: var(--fw-strong); color: var(--fg); }
body.msd-layout-v2 .msd-tb-pop-sub { font-size: var(--fs-label); color: var(--muted-fg); margin-top: 2px; }

body.msd-layout-v2 .msd-tb-phone {
    display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--fg-soft);
}
body.msd-layout-v2 .msd-tb-phone svg { color: var(--muted-fg); }
body.msd-layout-v2 .msd-tb-phone-texts { display: flex; flex-direction: column; line-height: 1.3; }
body.msd-layout-v2 .msd-tb-phone-label { font-size: var(--fs-label); color: var(--muted-fg); }
body.msd-layout-v2 .msd-tb-phone strong { font-size: var(--fs-body); color: var(--fg); font-weight: var(--fw-strong); }

body.msd-layout-v2 .msd-tb-mini { display: flex; align-items: center; gap: 6px; }
body.msd-layout-v2 .msd-tb-mini-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 8px; border-radius: var(--radius-pill);
    border: 1px solid var(--border); background: var(--card);
    font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--fg-soft); text-decoration: none;
}
body.msd-layout-v2 .msd-tb-mini-btn:hover { background: var(--pink-soft); border-color: var(--pink-border); color: var(--pink-strong); }

/* v1.12.0 — "Gem mit design" / "Hent mit design" / "Del design" i topbaren (punkt 5).
   Samme pille som .msd-tb-mini-btn, men med plads til ord. ⚠ TEMA-VÆRN: knapperne bærer
   temaets `.button`-klasse fra PHP (de har altid gjort det), og Flatsome giver den en
   højde, en skygge og en baggrund der ikke passer i en 64 px topbar. Vi nulstiller
   eksplicit frem for at håbe på specificitet — det er den samme fejl som størrelses-
   fliserne havde. */
body.msd-layout-v2 .msd-tb-actions { display: flex; align-items: center; gap: 6px; }
body.msd-layout-v2 .msd-tb-actions:empty { display: none; }
body.msd-layout-v2 .msd-tb-action-btn,
body.msd-layout-v2 .msd-tb-actions .button {
    display: inline-flex !important; align-items: center; justify-content: center;
    height: 32px !important; min-height: 0 !important; line-height: 1 !important;
    padding: 0 12px !important; margin: 0 !important;
    border-radius: var(--radius-pill) !important;
    border: 1px solid var(--border) !important; background: var(--card) !important;
    box-shadow: none !important; text-shadow: none !important;
    font-family: var(--font-ui); font-size: var(--fs-label); font-weight: var(--fw-strong);
    color: var(--fg-soft) !important; text-decoration: none; text-transform: none !important;
    white-space: nowrap; cursor: pointer;
}
body.msd-layout-v2 .msd-tb-action-btn:hover {
    background: var(--pink-soft) !important; border-color: var(--pink-border) !important;
    color: var(--pink-strong) !important;
}
/* Gæst: "Gem" er grå med en besked ved klik (save-design.js). Udseendet skal følge med. */
body.msd-layout-v2 .msd-tb-action-btn.msd-is-disabled { opacity: .5; }

/* v1.105.0 (Johns ønske 4/9): prisen i topbaren er afløst af "Se din pris"-knappen.
   #msd-tb-total BEVARES i DOM (skjult): popoverens beregning og tests spejler tallet. */
body.msd-layout-v2 .msd-tb-price { display: none; }
body.msd-layout-v2 .msd-tb-see-price {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    height: 32px; padding: 0 14px; margin: 0; border: 0;
    border-radius: var(--radius-pill); cursor: pointer;
    background: var(--tt-orange); color: var(--card);
    font-family: var(--font-ui); font-size: var(--fs-label); font-weight: var(--fw-strong);
    white-space: nowrap;
}
body.msd-layout-v2 .msd-tb-see-price:hover { background: var(--tt-orange-strong); }
/* Trin 2: prisen står i panelet — samme forsvinden som skinnens knap (visibility, ikke kun opacity). */
body.msd-layout-v2[data-msd-step="2"] .msd-tb-see-price { opacity: 0; visibility: hidden; pointer-events: none; }
body.msd-layout-v2 .msd-tb-total { font-size: var(--fs-title); font-weight: var(--fw-strong); color: var(--fg); white-space: nowrap; }
body.msd-layout-v2 .msd-tb-vat { font-size: var(--fs-label); color: var(--muted-fg); }

body.msd-layout-v2 .msd-tb-cta {
    flex: 0 0 auto; height: 42px; padding: 0 22px; border: 0; cursor: pointer;
    border-radius: var(--radius-md); background: var(--pink); color: var(--on-pink);
    font-family: var(--font-ui); font-size: var(--fs-base); font-weight: var(--fw-strong);
    white-space: nowrap;
}
body.msd-layout-v2 .msd-tb-cta:hover:not(:disabled) { background: var(--pink-hover); }
body.msd-layout-v2 .msd-tb-cta:disabled { opacity: .5; cursor: not-allowed; }

/* v1.4.0: "Se kurv" — SEKUNDÆR ved siden af CTA'en. Vises først efter første køb. */
body.msd-layout-v2 .msd-tb-cart {
    flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
    height: 42px; padding: 0 18px; border-radius: var(--radius-md);
    background: var(--card); border: 1px solid var(--pink); color: var(--pink-strong);
    font-family: var(--font-ui); font-size: var(--fs-base); font-weight: var(--fw-strong);
    text-decoration: none; white-space: nowrap;
}
body.msd-layout-v2 .msd-tb-cart:hover { background: var(--pink-soft); color: var(--pink-strong-hover); }
body.msd-layout-v2 .msd-tb-cart[hidden] { display: none; }

/* Den RIGTIGE kurv-knap bliver i form.cart (kurv-broen kræver det) — men den skal ikke stå
   dobbelt. Den skjules visuelt; proxyen i topbaren klikker den. */
body.msd-layout-v2 .msd-region-right form.cart .msd-textile-cta { display: none !important; }
body.msd-layout-v2 .msd-region-right form.cart .msd-buy-blocked-note { margin-top: 0; }

/* ── MØRK VÆRKTØJSSKINNE ────────────────────────────────────────────────────── */
body.msd-layout-v2 .msd-rail2 {
    transition: visibility .24s;
    grid-area: left; background: var(--tt-rail-bg);
    display: flex; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 10px 6px; overflow-y: auto; font-family: var(--font-ui);
}
body.msd-layout-v2 .msd-rail2 .msd-rail-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    width: 100%; min-height: 68px; padding: 10px 2px; cursor: pointer;
    background: transparent; border: 0; border-radius: var(--radius-md);
    color: var(--tt-rail-fg); font-size: var(--fs-label); font-weight: var(--fw-strong); line-height: 1.1;
    text-align: center;
}
body.msd-layout-v2 .msd-rail2 .msd-rail-btn span { display: block; }
body.msd-layout-v2 .msd-rail2 .msd-rail-btn:hover:not(:disabled) { background: var(--tt-rail-hover); color: var(--tt-rail-fg-active); }
body.msd-layout-v2 .msd-rail2 .msd-rail-btn.is-active { background: var(--tt-rail-active); color: var(--tt-rail-fg-active); }
body.msd-layout-v2 .msd-rail2 .msd-rail-btn:disabled { opacity: .38; cursor: not-allowed; }

/* ── VENSTRE PANEL ──────────────────────────────────────────────────────────── */
/* v1.12.0 — PRISBOKSEN BLIVER I BUNDEN (Johns ønske, OPGAVE-editor-ui punkt 4).
 *
 * HVAD DER VAR GALT: boksen var `position: sticky; bottom: -16px` mod PANELETS scroll.
 * Sticky klæber kun så længe containeren faktisk KAN rulle. Købspanelet folder én sektion
 * ud ad gangen, så indholdet er som regel kortere end panelet — og så falder boksen
 * tilbage til sin plads midt i flowet. Den fulgte altså menuerne, præcis som John så.
 *
 * RETTELSEN: panelet ruller ikke længere selv. I stedet ruller KUN accordion-området,
 * og prisboksen er en almindelig, fast sidste række. Kæden skal være ubrudt —
 * panel -> .msd-summary -> form.cart -> #msd-buy-panel — for `min-height: 0` skal sættes
 * på HVERT led, ellers nægter en flex-boks at blive mindre end sit indhold, og scrollen
 * havner det forkerte sted.
 *
 * MERK: `form.cart` FORBLIVER INTAKT. Den rigtige kurv-knap (.msd-textile-cta) skal ligge
 * inde i formen — topbarens knap er kun en proxy der klikker den. Vi flytter derfor
 * ingenting i DOM'en her; vi aendrer kun hvem der ruller.
 * MERK: `position: sticky` er FJERNET, ikke suppleret. To mekanismer til samme opgave er
 * netop sadan den nuvaerende fejl opstod (CLAUDE.md regel 5). */
body.msd-layout-v2 .msd-panel2 {
    /* v1.25.0: forsvinder på trin 2 — se to-trins-blokken. Overgangen står HER frem for
       i en egen regel: to blokke med samme selektor er to steder at være uenige om,
       hvordan panelet opfører sig.
       ⚠ INGEN `transform`. Tilbudspanelet ligger inde i `form.cart` og er `position:
       fixed`; en transformeret forfader gør fixed relativ til SIG SELV, og panelet blev
       trukket med ud af skærmen. Målt i browseren 28/8. Vi kollapser grid-kolonnerne
       i stedet — samme virkning, uden at bryde fixed. */
    transition: opacity .24s;
    grid-area: right; background: var(--card);
    border-left: 1px solid var(--border); border-right: 1px solid var(--border);
    display: flex; flex-direction: column; overflow: hidden; padding: 20px 20px 0;
}
body.msd-layout-v2 .msd-panel2 .msd-summary {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
body.msd-layout-v2 .msd-panel2 .msd-summary > form.cart {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
}
/* ⚠ TEMA-VÆRN — UDEN DEN FORSVINDER STØRRELSER OG FARVER (målt i browseren 27/8).
   Temaet giver `form.cart`s børn `flex: 1 1 100%`. Den regel var DØD så længe formen var
   en block; i det øjeblik vi gjorde den til flex, vågnede den, og ni synlige børn delte
   pladsen ligeligt — 64 px hver. Købspanelet gik fra ~500 til 64 px, og dets egen
   `overflow-y: auto` klippede så STØRRELSER og FARVE væk uden en eneste fejlmeddelelse.
   Kunden kunne ikke vælge størrelse.
   Her sættes børnene tilbage til deres naturlige højde; kun købspanelet må vokse. */
body.msd-layout-v2 .msd-panel2 .msd-summary > form.cart > * { flex: 0 0 auto; }
body.msd-layout-v2 .msd-panel2 #msd-buy-panel {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    /* Luft under den sidste sektion, sa den ikke klistrer til prisboksens kant. */
    padding-bottom: 8px;
}
/* ⚠ HER STOD en desktop-overskrivning af prisboksens sticky og margener — FJERNET i
   v1.24.0. Boksen vises ikke længere i panelet, så der er intet at rette op på. */
/* Panelets fod ligger EFTER prisboksen. Efter v1.12.0 rummer den for en KUNDE ingenting
   i hvile — butikkens "Ret design skabelon" renderes kun for `manage_woocommerce` — og en
   tom stribe under prisen ser ud som en fejl.
   ⚠ `:has()`, IKKE EN KLASSE SAT AF JS. Første forsøg satte klassen én gang ved opstart,
   og så skjulte foden ogsaa kvitteringen "Lagt i kurv", der først lægges ind i
   #msd-actions NÅR kunden køber. Målt i browseren 27/8 — kunden fik ingen kvittering.
   En tilstand der ændrer sig, må ikke låses fast på et tidspunkt.
   Ældre browsere uden :has() viser foden som hidtil; det er status quo, ikke en fejl. */
body.msd-layout-v2 .msd-panel-foot:not(:has(#msd-actions > *)) { display: none; }
/* Det rullende omrade ma ikke laase panelets oevrige tilstande: start-fliserne og
   edit-panelet er soeskende til .msd-summary og skal stadig kunne rulle hver for sig. */
body.msd-layout-v2 .msd-panel2 > #msd-panel-start,
body.msd-layout-v2 .msd-panel2 #msd-sidebar { overflow-y: auto; min-height: 0; }
body.msd-layout-v2 .msd-panel2 .msd-panel-h {
    margin: 0 0 14px; font-family: var(--font-ui); font-size: var(--fs-title); font-weight: var(--fw-strong); color: var(--fg);
}
/* Tre tilstande — ÉN attribut styrer hvad der er synligt. */
body.msd-layout-v2 .msd-panel2[data-panel="start"]   .msd-summary,
body.msd-layout-v2 .msd-panel2[data-panel="element"] #msd-panel-start,
body.msd-layout-v2 .msd-panel2[data-panel="product"] #msd-panel-start { display: none; }
/* I produkt-tilstand er edit-sidebaren tom (intet valgt) og skjules af den eksisterende
   :not(.is-editing)-regel; her sikrer vi blot at start-fliserne ikke også står der. */

body.msd-layout-v2 .msd-panel-start { display: flex; flex-direction: column; gap: 10px; }
body.msd-layout-v2 .msd-panel-start.is-dragover { outline: 2px dashed var(--pink); outline-offset: 6px; border-radius: var(--radius-md); }
body.msd-layout-v2 .msd-start-tile {
    display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 16px; cursor: pointer;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
    font-family: var(--font-ui); text-align: left;
}
body.msd-layout-v2 .msd-start-tile.is-primary { border: 2px solid var(--pink); background: var(--pink-tint); }
body.msd-layout-v2 .msd-start-tile:hover:not(.is-disabled) { border-color: var(--pink); background: var(--pink-soft); }
body.msd-layout-v2 .msd-start-tile.is-disabled { opacity: .45; cursor: not-allowed; }
body.msd-layout-v2 .msd-start-icon { flex: 0 0 auto; color: var(--pink-strong); display: inline-flex; }
/* "Brug samme design som på …" (PLAN-samme-design): kort med kurvlinjens preview — previews er vigtige, altid previews. */
body.msd-layout-v2 .msd-start-samme { display: flex; flex-direction: column; gap: 10px; }
body.msd-layout-v2 .msd-start-samme[hidden] { display: none; }
body.msd-layout-v2 .msd-samme-kort { border: 2px solid var(--pink); background: var(--pink-tint); }
body.msd-layout-v2 .msd-samme-preview { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 8px; background: #fff; border: 1px solid var(--border); overflow: hidden; display: inline-flex; align-items: center; justify-content: center; }
body.msd-layout-v2 .msd-samme-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }

body.msd-layout-v2 .msd-start-texts { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
body.msd-layout-v2 .msd-start-texts strong { font-size: var(--fs-base); color: var(--fg); font-weight: var(--fw-strong); }
body.msd-layout-v2 .msd-start-texts span { font-size: var(--fs-body); color: var(--muted-fg); }
body.msd-layout-v2 .msd-start-hint {
    margin: 6px 0 0; padding: 12px 14px; border-radius: var(--radius-md);
    background: var(--pink-tint); border: 1px dashed var(--pink-border);
    font-family: var(--font-ui); font-size: var(--fs-body); color: var(--fg-soft); line-height: 1.45;
}
body.msd-layout-v2 .msd-start-hint span { display: block; color: var(--muted-fg); }

/* Panelets fod: Gem/Hent/Del — synlig i ALLE tilstande (også mens et element er valgt,
   hvor to-tilstands-reglen ellers ville skjule #msd-actions). */
body.msd-layout-v2 .msd-panel-foot {
    margin-top: auto; position: sticky; bottom: 0;
    /* Bund-luften er IKKE pynt: sitets mystickyelements-bjælke er `position: fixed`,
       `z-index: 100` og dækker de nederste 53 px i HELE vinduets bredde (målt 24/8 —
       kun dens "Kontakt os"-fane er synlig, men wrapperen æder klik overalt). Uden
       luften ville Gem/Hent/kvitteringen ligge i en død zone. Værdien er en token, så
       den kan justeres ét sted hvis bjælken ændrer højde. */
    padding: 12px 0 calc(12px + var(--tt-sticky-h));
    background: var(--card); border-top: 1px solid var(--border);
}
body.msd-layout-v2 .msd-panel-foot #msd-actions {
    /* HØJRE-stillet med vilje: sitets egen faste "Kontakt os"-fane (mystickyelements) sidder
       nede i venstre hjørne og lå hen over knapperne, da de fyldte hele bredden. Målt i
       browseren 24/8 — fanen slutter ~176 px fra venstre, panelet er 400 px bredt. */
    display: flex !important; flex-direction: row; flex-wrap: wrap; justify-content: flex-end;
    gap: 8px; margin: 0;
}
body.msd-layout-v2 .msd-panel-foot #msd-actions > * {
    flex: 0 0 auto; width: auto !important; margin: 0 !important;
    padding: 8px 12px !important; font-size: var(--fs-body) !important; line-height: 1.2 !important;
    text-align: center; white-space: nowrap;
}

/* ── LÆRREDET ───────────────────────────────────────────────────────────────── */
body.msd-layout-v2 .msd-region-canvas { position: relative; background: var(--stage); padding: 28px 120px 28px 56px; }
/* Mockup'en må fylde mere end de gamle 760px — panelet har taget pladsen i venstre side. */
body.msd-layout-v2 .msd-editor-shell .msd-canvas-wrap { max-width: 1000px !important; }
/* v1.76.2: …men når fit-width/zoom har BEREGNET en bredde (--msd-cv-w), skal den gælde
   uklippet — ellers rendes lærredet smallere end centreringen regner med (boks-zoomen
   ramte "nederste højre hjørne", fordi 1224px blev klemt til 1000px af loftet ovenfor).
   Selektoren er med vilje tungere (body + 4 klasser) end 1000px-reglens (body + 3). */
body.msd-layout-v2 .msd-region-canvas.is-fitwidth .msd-canvas-wrap { max-width: none !important; }

/* v1.97.0: rotations-knappen findes kun på mobil — desktop har sidekortene i højre side. */
body.msd-layout-v2 .msd-rotate-views { display: none; }

/* v1.204.0: "handlinger på trøjen" findes kun på mobil — desktop har start-panelet i højre kolonne. */
body.msd-layout-v2 .msd-canvas-cta { display: none; }

/* v1.106.0 (Johns fund 4/9): FØRSTE klik missede — knappen fødes på lærredet (absolut i
   hjørnet) og HOPPER ind i skinnen når kortene er klar; et klik under hoppet ramte tomt.
   Mens den stadig er lærredets direkte barn, er den usynlig og uklikbar — den VISES
   først i sit blivende hjem. */
body.msd-layout-v2 .msd-region-canvas > .msd-see-price { opacity: 0; pointer-events: none; }

/* v1.104.0 (Johns måling 4/9): "Se din pris" bor FAST i kort-skinnen, altid lige under
   det nederste view — aldrig ovenpå, og den følger med når skinnen flytter for tilbuddet.
   (Flyttes derind af F.placeSeePrice; hjørne-geometrien fra basis-reglen nulstilles.) */
body.msd-layout-v2 .msd-page-rail .msd-see-price {
    position: static; right: auto; bottom: auto;
    width: 100%; min-width: 0; height: 40px; padding: 0 10px; margin-top: 2px;
    font-size: var(--fs-base); box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
}

/* Flydende værktøjsboks (Fortryd / Gentag / zoom) — lodret, i lærredets venstre side. */
body.msd-layout-v2 .msd-tool-dock {
    position: absolute; left: 14px; top: 50%; transform: translateY(-50%); z-index: 6;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 8px 6px; background: var(--card); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: 0 6px 20px rgba(0,0,0,.10);
}
body.msd-layout-v2 .msd-tool-dock .msd-subbar-btn {
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    width: 54px; padding: 7px 2px; margin: 0; border: 0; background: transparent; cursor: pointer;
    border-radius: var(--radius-sm); color: var(--fg-soft);
    font-family: var(--font-ui); font-size: var(--fs-label); font-weight: var(--fw-strong); line-height: 1;
}
body.msd-layout-v2 .msd-tool-dock .msd-subbar-btn:hover:not(:disabled) { background: var(--pink-soft); color: var(--pink-strong); }
body.msd-layout-v2 .msd-tool-dock .msd-subbar-btn:disabled { opacity: .35; cursor: not-allowed; }
body.msd-layout-v2 .msd-tool-dock-sep { width: 34px; height: 1px; background: var(--border); margin: 3px 0; }
body.msd-layout-v2 .msd-tool-dock .msd-footer-zoom {
    display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 0;
}
body.msd-layout-v2 .msd-tool-dock .msd-zoom-level { font-family: var(--font-ui); font-size: var(--fs-label); color: var(--muted-fg); }
/* v1.102.3 (Johns måling 4/9): "Zoom på trykket"-teksten på ÉN linje gjorde hele dokken
   til en bred firkant. Teksten ombrydes til en smal søjle (som mobilens dok), så dokken
   igen er stående og smal. */
body.msd-layout-v2 .msd-tool-dock .msd-zoom-toggle {
    width: 56px; height: auto; min-height: 0; padding: 6px 3px;
    white-space: normal; line-height: 1.2; font-size: var(--fs-label); text-align: center;
}

/* Sidekort i lærredets HØJRE side. Knapperne ER de gamle .msd-footer-page — kun klædt på. */
/* v1.12.0 — KORTENE ER 50 % STØRRE (Johns ønske, OPGAVE-editor-ui punkt 6).
   ⚠ MED EN HØJDEGRÆNSE, som rail'en aldrig har haft. Den er `top:50%` + translate og
   ruller ikke: bliver stakken højere end lærredet, bliver den KLIPPET, ikke rullet.
   Johns produkt har fire visninger (nu 726 px høj stak) og går fri overalt, men antallet
   kommer fra FPD-importen pr. produkt — seks trykområder på en 800 px skærm ville tabe de
   nederste kort uden en fejlmeddelelse. `max-height` + `overflow-y` koster tre linjer nu
   mod en fejlrapport ingen kan genskabe senere. */
body.msd-layout-v2 .msd-page-rail {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%); z-index: 6;
    /* v1.50.0: skinnen FLYTTER med når tilbuddet åbner (samme kurve som lærredets padding). */
    transition: right .34s cubic-bezier(.4, 0, .2, 1);
    /* v1.105.0 (Johns fund 4/9): knappen FORSVANDT når stakken var højere end skærmen —
       hele skinnen scrollede, og "Se din pris" scrollede med ud. Nu er skinnen en
       flex-kolonne: KORTENE scroller i deres egen beholder, knappen er pinned nederst
       og kan pr. konstruktion ikke forsvinde. Luften er 40 px nu hvor knappen bor I
       skinnen (de gamle 120 px var reserveret til hjørne-knappen). */
    max-height: calc(100vh - var(--tt-topbar-h) - 40px);
    display: flex; flex-direction: column;
    overflow: hidden;
}
body.msd-layout-v2 .msd-page-rail .msd-footer-pages {
    display: flex; flex-direction: column; gap: 12px;
    flex: 1 1 auto; min-height: 0;
    overflow-y: auto; overflow-x: hidden; scrollbar-width: thin;
    padding: 2px;   /* kortenes skygge/kant klippes ikke af scroll-beholderen */
}
body.msd-layout-v2 .msd-page-rail .msd-footer-page {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    /* height/border-radius overskriver BEVIDST chip-basisreglen (.msd-footer-page: 30px høj
       pille) — kortet er ikke en chip længere. Uden dem klippes thumbnailet væk (målt i
       browseren 24/8: kortene stod som 30px pillter med et brudt billed-ikon). */
    width: 126px; height: auto; padding: 8px 6px; margin: 0; cursor: pointer; flex: 0 0 auto;
    border-radius: var(--radius-md); white-space: normal;
    background: var(--card); border: 2px solid var(--border); border-radius: var(--radius-md);
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    font-family: var(--font-ui); font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--fg-soft);
    line-height: 1.15; text-align: center;
}
body.msd-layout-v2 .msd-page-rail .msd-footer-page:hover { border-color: var(--pink-border); }
body.msd-layout-v2 .msd-page-rail .msd-footer-page.is-active { border-color: var(--pink); color: var(--pink-strong); }
body.msd-layout-v2 .msd-page-rail .msd-footer-page.is-locked { opacity: .45; }
/* v1.15.0 — INGEN GRÅ KANTER PÅ SIDEKORTENE (Johns note 27/8).
   Mockup'en er kvadratisk (78 × 78), kortet er 110 px bredt — så `background: var(--stage)`
   stod som to grå bjælker i siderne af hvert kort. Baggrunden var tænkt som "flade bag
   billedet", men billedet har sin egen; det eneste den gjorde, var at tegne den tomme
   plads op. Uden den er siderne kortets egen hvide flade. */
body.msd-layout-v2 .msd-page-thumb {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 78px; overflow: hidden; border-radius: var(--radius-sm); background: transparent;
}
body.msd-layout-v2 .msd-page-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
body.msd-layout-v2 .msd-page-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* v1.114.0: kortets mål ("26x35 cm" / "10x10 cm") — det man betaler for. Eget element:
   .msd-page-label spejles af mobil-rotate-knappen og skal blive ved med at sige "Front". */
body.msd-layout-v2 .msd-page-dim { display: block; font-size: var(--fs-label, 11px); color: var(--muted-fg, #8a8a8e); line-height: 1.2; }

} /* @media (min-width: 901px) */

/* Produkttitel + WC's prislinje i panelet: topbaren bærer dem nu. */
body.msd-layout-v2 .msd-summary > .product_title,
body.msd-layout-v2 .msd-summary > .price { display: none; }

/* ── TRYKFIL-PANELET (tilstand B) — samme udseende i begge bredder ──────────── */
/* Har elementet ALLEREDE en fil, er upload-zonen og telefon-knappen dubletter af "Erstat fil"
   (samme flow, samme dialog). De skjules derfor KUN når trykfil-panelet er monteret — en TOM
   upload-plads viser dem uændret, og det er netop den zone upload-picker-testene klikker på. */
body.msd-layout-v2 #msd-image-controls.is-artwork #msd-upload-group,
body.msd-layout-v2 #msd-image-controls.is-artwork .msd-phone-upload-btn { display: none; }
body.msd-layout-v2 .msd-artwork-file {
    display: flex; align-items: center; gap: 12px; margin: 0 0 12px;
}
body.msd-layout-v2 .msd-artwork-thumb {
    flex: 0 0 auto; width: 76px; height: 76px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
    /* Ternet (transparens-)baggrund — kunden skal kunne SE om filen har gennemsigtighed. */
    background-color: var(--card);
    background-image:
        linear-gradient(45deg, var(--tt-checker) 25%, transparent 25%, transparent 75%, var(--tt-checker) 75%),
        linear-gradient(45deg, var(--tt-checker) 25%, transparent 25%, transparent 75%, var(--tt-checker) 75%);
    background-size: 14px 14px;
    background-position: 0 0, 7px 7px;
}
body.msd-layout-v2 .msd-artwork-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
body.msd-layout-v2 .msd-artwork-file-texts { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
body.msd-layout-v2 .msd-artwork-file-texts strong {
    font-family: var(--font-ui); font-size: var(--fs-base); color: var(--fg); font-weight: var(--fw-strong);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.msd-layout-v2 .msd-artwork-facts { font-family: var(--font-ui); font-size: var(--fs-body); color: var(--muted-fg); }

.msd-artwork-quality { display: flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: var(--fs-body); color: var(--fg-soft); }
.msd-artwork-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted-fg); flex: 0 0 auto; }
.msd-artwork-dot[data-level="good"] { background: var(--pink); }
.msd-artwork-dot[data-level="ok"]   { background: var(--pink); }
.msd-artwork-dot[data-level="warn"] { background: var(--tt-warn); }
.msd-artwork-dot[data-level="bad"],
.msd-artwork-dot[data-level="low"]  { background: var(--danger); }

body.msd-layout-v2 .msd-artwork-treatments { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 16px; }
body.msd-layout-v2 .msd-artwork-treatment {
    display: flex; align-items: flex-start; gap: 10px; width: 100%; padding: 11px 12px; cursor: pointer;
    background: var(--pink-tint); border: 1px solid var(--pink-border); border-radius: var(--radius-md);
    font-family: var(--font-ui); text-align: left; color: var(--fg);
}
body.msd-layout-v2 .msd-artwork-treatment:hover { background: var(--pink-soft); border-color: var(--pink); }
/* `hidden` er en UA-regel med lav specificitet — uden denne linje ville display:flex ovenfor
   VISE den flag-styrede "Opskalér med AI"-knap alligevel (målt i browser-testen 24/8). */
body.msd-layout-v2 .msd-artwork-treatment[hidden] { display: none; }
body.msd-layout-v2 .msd-artwork-treatment > svg { flex: 0 0 auto; margin-top: 1px; color: var(--pink-strong); }
.msd-artwork-treatment-texts { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.msd-artwork-treatment-head {
    display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
    font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--fg);
}
.msd-artwork-badge {
    display: inline-block; padding: 1px 7px; border-radius: var(--radius-pill);
    background: var(--pink); color: var(--on-pink); font-size: var(--fs-label); font-weight: var(--fw-strong); letter-spacing: .02em;
}
.msd-artwork-treatment-sub { font-size: var(--fs-label); color: var(--muted-fg); line-height: 1.35; }
/* v1.3.0: "Opskalér med AI" mens den arbejder — knappen er død, men det skal SES. */
body.msd-layout-v2 .msd-artwork-treatment.is-busy { opacity: .6; cursor: progress; }
body.msd-layout-v2 .msd-artwork-treatment:disabled { cursor: default; }

/* Status-linjen for opskaleringen. Upload-zonens egen besked er skjult når pladsen HAR en
   fil (1.2.0), så trykfil-panelet har sin egen — ellers ville beskeden være usynlig netop
   dér hvor kunden kigger. */
.msd-artwork-status {
    margin: 10px 0 0; padding: 9px 11px; border-radius: var(--radius-sm);
    background: var(--pink-tint); border: 1px solid var(--pink-border);
    font-family: var(--font-ui); font-size: var(--fs-body); color: var(--fg-soft); line-height: 1.4;
}
.msd-artwork-status[hidden] { display: none; }
.msd-artwork-status[data-kind="ok"]    { background: var(--pink-soft); color: var(--pink-strong); }
.msd-artwork-status[data-kind="error"] { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning-fg); }

/* v1.243.0: .msd-artwork-small-actions / .msd-artwork-mini er erstattet af handlingsrækken (.msd-act-row). */

/* ── MOBIL (≤900px): RYDDET TOP-HEADER (v1.203.0, Johns mockup 12/9) ───────────
   Før flød produkt-blokken i tre stablede linjer (navn / farve / "Tilbage til
   produktet") ved siden af logoet — "mast ned i flere linjer". Nu er headeren ÉN
   ren række: [‹] logo · produktnavn (én linje, forkortet) · (luft) · Se din pris.
   Farven og den lange tilbage-tekst er væk på mobil (farven ses på trøjen + i arket;
   tilbage-linket bliver en kompakt ‹-pil). */
@media (max-width: 900px) {
    body.msd-layout-v2 .msd-tb-delivery,
    body.msd-layout-v2 .msd-tb-phone,
    body.msd-layout-v2 .msd-tb-mini,
    body.msd-layout-v2 .msd-tb-price,
    body.msd-layout-v2 .msd-tb-product-color,
    body.msd-layout-v2 .msd-tb-back-lang,
    body.msd-layout-v2 .msd-tb-cta { display: none; }
    body.msd-layout-v2 .msd-topbar2 { display: flex; align-items: center; gap: 10px; padding: 0 12px; }
    /* v1.210.0 (Johns fund 13/9): TT.dk-mærket erstattes af en rigtig "Tilbage til produkt"-knap
       i venstre hjørne (se .msd-tb-back nedenfor) — det var svært at finde tilbage til produktet. */
    body.msd-layout-v2 .msd-tb-logo { display: none; }
    /* Luft-elementet æder ellers al plads, så produktnavnet blev klemt til "S". Navnet fylder
       nu selv midten og forkortes pænt. */
    body.msd-layout-v2 .msd-tb-spacer { display: none; }
    /* ── v1.97.0 (Johns mobil-gennemgang 4/9, bid 2) — afløser v1.52.0-båndene:
       1. Pille-rækken (Front/Ryg/ærmer) er VÆK på mobil — rotations-knappen
          (#msd-rotate-views, RushOrderTees-stil) blader gennem visningerne i stedet.
          Pillerne findes stadig i DOM (rotate-knappen klikker på dem), bare skjult.
       2. Værktøjs-dokken er IKKE længere vandret oven på trøjen — desktop-reglens
          lodrette dok i venstre side gælder også her, kun rykket tættere på kanten. */
    /* v1.206.0 (Johns fund 13/9): ÉN ensfarvet hvid flade — lærredet skal ikke være gråt
       ved siden af den hvide header/nav. */
    body.msd-layout-v2 .msd-region-canvas { position: relative; background: var(--card); }
    /* Den forstørrede trøje (fit-basen ×1,5) er bredere end skærmen. I FIT-tilstand centrerer
       flex den symmetrisk, og regionen KLIPPER (ingen scroll), så ærmerne bløder lige meget ud
       i begge sider. centerZoomView's scrollLeft ville ellers dobbelt-forskyde den mod venstre.
       Ved MANUEL zoom (.is-zoomed) skal regionen stadig kunne scrolle/panne. */
    body.msd-layout-v2 .msd-region-canvas { overflow: hidden; }
    body.msd-layout-v2 .msd-region-canvas.is-zoomed { overflow: auto; }
    body.msd-layout-v2 .msd-page-rail { display: none; }
    /* v1.203.0: produkt-blokken er ÉN række — tilbage-pil (‹) FØRST, så produktnavnet
       på én linje. Navnet forkortes med ellipse frem for at ombryde. */
    body.msd-layout-v2 .msd-tb-product {
        display: flex; flex-direction: row; align-items: center; gap: 8px;
        flex: 1 1 auto; min-width: 0; line-height: 1.25;
    }
    body.msd-layout-v2 .msd-tb-product-name {
        order: 2; flex: 1 1 auto; min-width: 0;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--fg);
    }
    /* v1.210.0: TILBAGE-knappen — spejl af "Se din pris" i VENSTRE hjørne, pil mod venstre.
       Sekundær stil (hvid m. kant), så den orange "Se din pris" forbliver den primære CTA. */
    body.msd-layout-v2 .msd-tb-back {
        order: 1; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px;
        height: 36px; padding: 0 13px; border-radius: var(--radius-pill);
        border: 1.5px solid var(--border); background: var(--card); color: var(--fg);
        font-size: var(--fs-label); font-weight: var(--fw-strong); line-height: 1;
        white-space: nowrap; text-decoration: none;
    }
    body.msd-layout-v2 .msd-tb-back:active { border-color: var(--tt-orange); color: var(--tt-orange); }
    /* "Se din pris" — desktop-pillen bor bag min-width:901, så mobilen fik en ustylet knap
       der brød "Se / din / pris / →" over tre linjer og gjorde headeren 76 px høj. Her er
       den en kompakt, fast pille i hjørnet der ALDRIG ombryder eller krymper. */
    body.msd-layout-v2 .msd-tb-see-price {
        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
        flex: 0 0 auto; height: 36px; padding: 0 14px; margin: 0; border: 0;
        border-radius: var(--radius-pill); cursor: pointer; white-space: nowrap;
        background: var(--tt-orange); color: var(--card);
        font-family: var(--font-ui); font-size: var(--fs-label); font-weight: var(--fw-strong);
    }
    /* Hjælp-pillen i actions-slot'en holdes kompakt, så headeren bliver én ren række. */
    body.msd-layout-v2 .msd-tb-actions { flex: 0 0 auto; }
    /* v1.203.0 (Johns mockup 12/9): Fortryd/Gentag er små RUNDE knapper i VENSTRE HJØRNE —
       ikke længere en høj hvid pille midt oven på designet. Dokken mister sit kort-look;
       de to knapper står frit som ikoner, og zoom-chippen hænger under dem i samme hjørne. */
    /* v1.212.0 (Johns fund 13/9): Fortryd/Gentag står VED SIDEN AF hinanden (ikke over), og
       zoom-chippen wrapper ned under dem. max-width = to knapper + gap, så kun de to er på
       række 1. */
    body.msd-layout-v2 .msd-tool-dock {
        position: absolute; left: 12px; top: 12px; transform: none; z-index: 6;
        display: flex; flex-flow: row wrap; align-items: flex-start; gap: 8px;
        max-width: 88px; padding: 0; background: transparent; border: 0; box-shadow: none;
    }
    body.msd-layout-v2 .msd-tool-dock .msd-subbar-btn {
        display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0;
        width: 40px; height: 40px; padding: 0; margin: 0; cursor: pointer;
        border: 1px solid var(--border); border-radius: 50%;
        background: var(--card); box-shadow: 0 3px 10px rgba(0,0,0,.14); color: var(--fg-soft);
        font-family: var(--font-ui);
    }
    /* Ikon-kun i hjørnet — den lange "Fortryd/Gentag"-tekst gjorde knappen bred (og pillen høj). */
    body.msd-layout-v2 .msd-tool-dock .msd-subbar-btn span { display: none; }
    body.msd-layout-v2 .msd-tool-dock .msd-subbar-btn:disabled { opacity: .35; }
    /* Gentag (frem) vises KUN når der er noget at gå frem til — dvs. når Fortryd har været
       brugt. Ellers skjult (Johns fund 13/9). Fortryd bliver stående (dæmpet når tomt). */
    body.msd-layout-v2 .msd-tool-dock #msd-redo:disabled { display: none; }
    body.msd-layout-v2 .msd-tool-dock .msd-subbar-btn:active:not(:disabled) { background: var(--pink-soft); color: var(--pink-strong); }
    body.msd-layout-v2 .msd-tool-dock-sep { display: none; }
    /* Zoom-kontrollen bliver en lille hvid chip i samme hjørne — stadig ude af vejen for trøjen. */
    body.msd-layout-v2 .msd-tool-dock .msd-footer-zoom {
        display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 0;
        padding: 6px 4px; background: var(--card); border: 1px solid var(--border);
        border-radius: var(--radius-md); box-shadow: 0 3px 10px rgba(0,0,0,.14);
    }
    body.msd-layout-v2 .msd-tool-dock .msd-zoom-toggle {
        width: 44px; height: auto; min-height: 0; padding: 5px 3px;
        white-space: normal; line-height: 1.15; font-size: var(--fs-label); text-align: center;
    }
    /* v1.203.0 / v1.211.0 (Johns mockup + CustomInk-reference): roter-knappen bor i HØJRE HJØRNE
       som en fast, rund knap. FAST størrelse (44×44) er rettelsen af "den ændrer størrelse".
       v1.211.0: udseendet matcher nu CustomInk — en FYLDT grå cirkel med hvidt to-pile-ikon. */
    body.msd-layout-v2 .msd-rotate-views {
        display: flex; position: absolute; right: 12px; top: 12px; bottom: auto; transform: none; z-index: 6;
        align-items: center; justify-content: center;
        width: 44px; height: 44px; padding: 0; margin: 0;
        border: 0; border-radius: 50%;
        background: var(--muted-fg); box-shadow: 0 4px 14px rgba(0,0,0,.22); cursor: pointer;
        color: var(--card); font-family: var(--font-ui);
    }
    body.msd-layout-v2 .msd-rotate-views:active { background: var(--fg-soft); }

    /* v1.204.0 (Johns mockup 12/9): handlinger PÅ trøjen på en TOM trøje — midt på lærredet.
       Forsvinder (JS sætter [hidden]) så snart der er et tryk, så de aldrig dækker designet. */
    body.msd-layout-v2 .msd-canvas-cta {
        display: flex; flex-direction: column; gap: 10px; z-index: 5;
        position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%);
        width: min(72vw, 260px);
    }
    body.msd-layout-v2 .msd-canvas-cta[hidden] { display: none; }
    body.msd-layout-v2 .msd-canvas-cta-btn {
        display: inline-flex; align-items: center; justify-content: center; gap: 9px;
        height: 50px; padding: 0 14px; border-radius: 13px; cursor: pointer;
        border: 1.5px solid var(--border); background: var(--card); color: var(--fg);
        font-family: var(--font-ui); font-size: var(--fs-body); font-weight: var(--fw-strong);
        box-shadow: 0 4px 14px rgba(0,0,0,.10);
    }
    body.msd-layout-v2 .msd-canvas-cta-btn.is-primary {
        background: var(--tt-orange); border-color: var(--tt-orange); color: var(--card);
        box-shadow: 0 6px 18px rgba(184,92,56,.30);
    }
    body.msd-layout-v2 .msd-canvas-cta-btn:disabled { opacity: .4; cursor: not-allowed; }
    /* v1.268.21: "Brug samme design som på …" spejlet øverst i boksen — preview + navn, pink som kortet. */
    body.msd-layout-v2 .msd-canvas-cta-samme {
        height: auto; min-height: 56px; padding: 7px 12px 7px 7px; justify-content: flex-start; text-align: left;
        border: 2px solid var(--pink); background: var(--pink-tint);
    }
    body.msd-layout-v2 .msd-canvas-cta-preview {
        flex: 0 0 auto; width: 44px; height: 44px; border-radius: 8px; background: #fff; border: 1px solid var(--border);
        overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
    }
    body.msd-layout-v2 .msd-canvas-cta-preview img { width: 100%; height: 100%; object-fit: contain; display: block; }
    body.msd-layout-v2 .msd-canvas-cta-label { font-size: var(--fs-small); line-height: 1.25; min-width: 0; }

    /* v1.208.0 (Johns fund 13/9): BOKS-VÆLGEREN (placering) er en desktop-dialog bygget med
       inline-styles i box-choice.js (min(1020px,94vw), 3 kort side om side, 42px padding). På
       mobil klemtes de 3 kort til ~66px, så teksten brød ét ord pr. linje og skærmen var
       ubrugelig. Her gøres den mobil-venlig: kompakt dialog + kortene STABLET lodret som brede
       rækker (miniature til venstre, tekst til højre). !important slår box-choice.js' inline-styles.
       JS er urørt — kun præsentation. */
    .msd-boxchoice-sloer > div {
        width: 94vw !important; padding: 18px !important;
        border-radius: var(--radius-md) !important; max-height: 86vh; overflow-y: auto;
    }
    .msd-boxchoice-sloer h3 { font-size: var(--fs-title) !important; margin: 0 0 4px !important; }
    .msd-boxchoice-sloer > div > p { font-size: var(--fs-base) !important; margin: 0 0 14px !important; }
    .msd-boxchoice-valg { flex-direction: column !important; gap: 10px !important; }
    .msd-boxchoice-valg > button {
        display: flex !important; align-items: center !important; gap: 14px !important;
        flex: 0 0 auto !important; padding: 12px 14px !important; text-align: left !important;
        border: 1.5px solid var(--border) !important; border-radius: var(--radius-md) !important;
    }
    .msd-boxchoice-valg > button:active { border-color: var(--tt-orange) !important; background: var(--pink-soft) !important; }
    /* Miniaturen (trøje + grøn boks-markering) er det visuelle salgspunkt — fast, lille.
       ⚠ iOS Safari beregner IKKE bredden ud fra height+aspect-ratio (miniaturen kollapsede til 0
       og forsvandt på simulatoren). Sæt BREDDEN eksplicit; aspect-ratio giver højden (height:auto
       slår box-choice.js' inline height:252px). */
    .msd-boxchoice-valg > button > span:first-child {
        width: 66px !important; height: auto !important; margin: 0 !important; flex: 0 0 auto !important;
    }
    .msd-boxchoice-valg > button > span:last-child { flex: 1 1 auto; min-width: 0; }
    /* ⚠ Temaet arver en FAST line-height (~37 px) ind i dialogen, så hver tekstlinje blev 37 px
       høj uanset skriftstørrelse → enorme mellemrum og kortet blev 188 px højt (nederste kort
       røg ud). Stram line-height + margener, så navn · mål · pris står tæt: kompakt og salgbart. */
    .msd-boxchoice-valg > button > span:last-child,
    .msd-boxchoice-valg > button > span:last-child * { line-height: 1.28 !important; }
    .msd-boxchoice-valg > button b { display: block; font-size: var(--fs-body) !important; margin: 0 !important; }
    .msd-boxchoice-valg > button small { font-size: var(--fs-label) !important; }
    /* Prisen er det salgbare — tydelig og tæt på (temaets store margin/line-height fjernet). */
    .msd-boxchoice-valg > button > span:last-child > span {
        display: block !important; margin: 3px 0 0 !important; font-size: var(--fs-title) !important;
    }
    .msd-boxchoice-valg > button > span:last-child > span small { display: block !important; margin: 1px 0 0 !important; font-weight: var(--fw-normal); }

    /* ── v1.98.0 (Johns mobil-gennemgang 4/9, punkt 6): "Hvad vil du lave?" —
       TRE ens knapper ved siden af hinanden (ikon over titel, undertitlerne væk),
       i stedet for de rå, spredte rækker. Flisernes kort-dragt bor bag min-width:901,
       så mobilen får sit eget komplette udtryk her; id-selektoren slår den globale
       2-kolonne-regel længere nede i filen. */
    body.msd-layout-v2 #msd-panel-start { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; align-content: start; }
    body.msd-layout-v2 #msd-panel-start .msd-panel-h,
    body.msd-layout-v2 #msd-panel-start .msd-start-hint,
    body.msd-layout-v2 #msd-panel-start .msd-start-reuse { grid-column: 1 / -1; }
    body.msd-layout-v2 #msd-panel-start .msd-start-samme { grid-column: 1 / -1; }
    body.msd-layout-v2 #msd-panel-start .msd-start-tile {
        display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 8px; width: 100%; min-height: 84px; padding: 12px 6px; margin: 0; cursor: pointer;
        background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
        font-family: var(--font-ui); text-align: center;
    }
    body.msd-layout-v2 #msd-panel-start .msd-start-tile.is-primary { border: 2px solid var(--pink); background: var(--pink-tint); }
    body.msd-layout-v2 #msd-panel-start .msd-start-tile.is-wide { grid-column: auto; }
    body.msd-layout-v2 #msd-panel-start .msd-start-icon { flex: 0 0 auto; color: var(--pink-strong); display: inline-flex; }
    body.msd-layout-v2 #msd-panel-start .msd-start-texts { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
    body.msd-layout-v2 #msd-panel-start .msd-start-texts strong { font-size: var(--fs-body); color: var(--fg); font-weight: var(--fw-strong); }
    body.msd-layout-v2 #msd-panel-start .msd-start-texts span { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   v1.4.0 — VENTE-DIALOG UNDER UPLOAD (OPGAVE-kurv-upload-miniaturer, punkt 4)

   Overlay + hvidt kort, roterende spinner, stribet statusbar og tre trin med
   flueben. Alt er CSS-animation (ingen billeder, intet JS-tick), og dialogen
   er skjult indtil upload-vejen åbner den.
   ════════════════════════════════════════════════════════════════════════════ */

.msd-uploadwait-backdrop { display: none; }
.msd-uploadwait-backdrop.is-open { display: flex; }

.msd-uploadwait {
    background: var(--card); color: var(--fg); font-family: var(--font-ui);
    width: 100%; max-width: 420px; border-radius: var(--radius-md); padding: 22px;
    box-shadow: 0 18px 50px rgba(0,0,0,.28); border: 1px solid var(--border);
}
.msd-uploadwait-head { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; }
.msd-uploadwait-texts { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.msd-uploadwait-title { font-size: var(--fs-title); font-weight: var(--fw-strong); color: var(--fg); }
.msd-uploadwait-file {
    font-size: var(--fs-body); color: var(--muted-fg);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Spinner: ren CSS-rotation. Den grønne bue på en lys ring. */
.msd-uploadwait-spinner {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
    border: 3px solid var(--pink-soft); border-top-color: var(--pink);
    animation: msd-uploadwait-spin .9s linear infinite;
}
@keyframes msd-uploadwait-spin { to { transform: rotate(360deg); } }

/* Statusbar. Striberne er en gentaget lineær gradient hvis background-position
   animeres — den kører BÅDE under en målt procent og i "i gang"-tilstanden, så
   baren altid ser levende ud. */
.msd-uploadwait-bar {
    height: 10px; border-radius: var(--radius-pill); overflow: hidden;
    background: var(--pink-soft);
}
.msd-uploadwait-fill {
    width: 0; height: 100%; border-radius: var(--radius-pill);
    background-color: var(--pink);
    background-image: linear-gradient(115deg,
        rgba(255,255,255,.28) 25%, transparent 25%, transparent 50%,
        rgba(255,255,255,.28) 50%, rgba(255,255,255,.28) 75%, transparent 75%);
    background-size: 22px 22px;
    animation: msd-uploadwait-stripes .7s linear infinite;
    transition: width .18s ease-out;
}
@keyframes msd-uploadwait-stripes { from { background-position: 0 0; } to { background-position: 22px 0; } }
/* "I gang" uden procent: baren fylder, men dæmpes så den ikke ligner 100 %. */
.msd-uploadwait-bar.is-indeterminate .msd-uploadwait-fill { opacity: .45; }
.msd-uploadwait-pct {
    min-height: 18px; margin: 6px 0 0; text-align: right;
    font-size: var(--fs-label); font-weight: var(--fw-strong); color: var(--pink-strong);
}

/* Trinnene. Fluebenet tegnes med to streger (ren CSS) når trinnet er færdigt. */
.msd-uploadwait-steps { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.msd-uploadwait-step {
    display: flex; align-items: center; gap: 10px;
    font-size: var(--fs-body); color: var(--muted-fg);
}
.msd-uploadwait-step.is-active { color: var(--fg); font-weight: var(--fw-strong); }
.msd-uploadwait-step.is-done { color: var(--fg-soft); }
.msd-uploadwait-tick {
    flex: 0 0 auto; position: relative; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid var(--border); box-sizing: border-box;
}
.msd-uploadwait-step.is-active .msd-uploadwait-tick { border-color: var(--pink); }
.msd-uploadwait-step.is-done .msd-uploadwait-tick { border-color: var(--pink); background: var(--pink); }
.msd-uploadwait-step.is-done .msd-uploadwait-tick::after {
    content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px;
    border: solid var(--on-pink); border-width: 0 2px 2px 0; transform: rotate(45deg);
}

.msd-uploadwait-error {
    margin: 14px 0 0; padding: 10px 12px; border-radius: var(--radius-sm);
    background: var(--warning-bg); border: 1px solid var(--warning-border);
    font-size: var(--fs-body); color: var(--warning-fg); line-height: 1.45;
}
.msd-uploadwait-error[hidden] { display: none; }
.msd-uploadwait-backdrop.is-error .msd-uploadwait-spinner { animation: none; border-top-color: var(--border); }
.msd-uploadwait-actions { display: flex; justify-content: flex-end; gap: 8px; margin: 16px 0 0; }

/* Respektér "reducér bevægelse": spinner og striber står stille, men tilstanden
   er stadig aflæselig på trin, procent og barens bredde. */
@media (prefers-reduced-motion: reduce) {
    .msd-uploadwait-spinner, .msd-uploadwait-fill { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   v1.7.0 — NYT TEKST-FLOW (OPGAVE-tekstpanel fase 1, Custom Ink som facit)
   Farver og typografi er UÆNDREDE fra 1.2.0-layoutet — der er kun kommet nye
   elementer til, ingen nye tokens.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Startfliser: LODRETTE i et 2-kolonners gitter (Custom Inks 2×2) ────────── */
body.msd-layout-v2 .msd-panel-start {
    display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-content: start;
}
body.msd-layout-v2 .msd-panel-start .msd-panel-h,
body.msd-layout-v2 .msd-panel-start .msd-start-hint { grid-column: 1 / -1; }
/* Ikon OVER label, centreret — den form Custom Ink bruger, og som gør de to
   valg lige store frem for at gøre det ene til en overskrift. */
body.msd-layout-v2 .msd-start-tile {
    flex-direction: column; align-items: center; justify-content: center;
    gap: 10px; padding: 22px 12px; text-align: center; min-height: 116px;
}
body.msd-layout-v2 .msd-start-tile .msd-start-texts { align-items: center; }
/* "Skift produkt" fylder hele bredden og er lettere — det er ikke en design-handling. */
body.msd-layout-v2 .msd-start-tile.is-wide {
    grid-column: 1 / -1; flex-direction: row; justify-content: flex-start;
    text-align: left; min-height: 0; padding: 14px 16px;
}
body.msd-layout-v2 .msd-start-tile.is-wide .msd-start-texts { align-items: flex-start; }

/* ── Tilstand C: "Tilføj tekst" ─────────────────────────────────────────────── */
body.msd-layout-v2 .msd-panel-addtext { display: none; }
body.msd-layout-v2 .msd-panel2[data-panel="addtext"] .msd-panel-addtext { display: flex; flex-direction: column; gap: 12px; }
body.msd-layout-v2 .msd-panel2[data-panel="addtext"] #msd-panel-start,
body.msd-layout-v2 .msd-panel2[data-panel="addtext"] .msd-summary { display: none; }

body.msd-layout-v2 .msd-panel-head { display: flex; align-items: center; gap: 8px; }
body.msd-layout-v2 .msd-panel-head .msd-panel-h { flex: 1; margin: 0; text-align: center; }
body.msd-layout-v2 .msd-panel-back,
body.msd-layout-v2 .msd-panel-close {
    background: none; border: none; cursor: pointer; color: var(--muted-fg);
    font-size: var(--fs-title); line-height: 1; padding: 4px 8px; border-radius: var(--radius-sm);
}
body.msd-layout-v2 .msd-panel-back:hover,
body.msd-layout-v2 .msd-panel-close:hover { background: var(--pink-soft); color: var(--fg); }

body.msd-layout-v2 .msd-addtext-input {
    width: 100%; min-height: 76px; padding: 14px; resize: vertical;
    font-family: var(--font-ui); font-size: var(--fs-lg, 16px); line-height: 1.35;
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); color: var(--fg);
}
body.msd-layout-v2 .msd-addtext-input:focus { outline: none; border-color: var(--pink); }
body.msd-layout-v2 .msd-addtext-submit {
    width: 100%; padding: 14px 16px; cursor: pointer; border: none;
    border-radius: var(--radius-md); background: var(--pink); color: #fff;
    font-family: var(--font-ui); font-size: var(--fs-base); font-weight: var(--fw-strong);
}
body.msd-layout-v2 .msd-addtext-submit:hover:not(:disabled) { background: var(--pink-strong); }
/* Deaktiveret indtil der ER tekst — en knap der laver et tomt element er en fælde. */
body.msd-layout-v2 .msd-addtext-submit:disabled { opacity: .4; cursor: not-allowed; }
body.msd-layout-v2 .msd-addtext-hint { margin: 0; font-size: var(--fs-body); color: var(--muted-fg); text-align: center; }

/* ── Rediger tekst: rækker der peger videre (skrifttype, farve) ─────────────── */
body.msd-layout-v2 .msd-row-btn {
    display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 14px; cursor: pointer;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
    font-family: var(--font-ui); font-size: var(--fs-base); color: var(--fg); text-align: left;
}
body.msd-layout-v2 .msd-row-btn:hover { border-color: var(--pink); background: var(--pink-soft); }
body.msd-layout-v2 .msd-row-label { flex: 0 0 auto; }
/* Værdien står til HØJRE og må gerne beskæres — fontnavnet tegnes i sin egen skrift,
   og et langt navn må ikke skubbe pilen ud af rækken. */
body.msd-layout-v2 .msd-row-value {
    flex: 1; min-width: 0; text-align: right; color: var(--muted-fg);
    display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
body.msd-layout-v2 .msd-row-chev { flex: 0 0 auto; color: var(--muted-fg); font-size: 18px; line-height: 1; }
body.msd-layout-v2 .msd-row-swatch {
    width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--border); flex: 0 0 auto;
}

/* ── Undersider ─────────────────────────────────────────────────────────────── */
body.msd-layout-v2 .msd-sheet { display: flex; flex-direction: column; gap: 10px; }

/* ⚠ EN UNDERSIDE SKAL ERSTATTE PANELET — IKKE LÆGGE SIG UNDER DET.
 *
 * Johns fund 30/8: undersiden åbnede i BUNDEN, efter rotation, højde, justering, centrering
 * og "Fortryd ændringer". Med en lang tekst havnede den helt uden for skærmen (v1.37.0 rullede
 * den i syne, men den lå der stadig). Hans ord: *"det skal expand, så man kan vælge dem, i
 * stedet for at åbne op nede i bunden."*
 *
 * Markup'en var altid tænkt sådan — undersiderne har deres egen overskrift og en tilbage-pil,
 * og `body.msd-sheet-open` blev sat. Men klassen blev KUN brugt på mobil (≤900 px). På desktop
 * blev kontrollerne stående, og undersiden lagde sig nedenunder.
 *
 * Nu gælder den overalt: er en underside åben, viger elementets kontroller. Tilbage-pilen i
 * undersidens hoved er vejen tilbage — den lukker via `data-sheet-close`, uændret. */
body.msd-layout-v2.msd-subpage-open #msd-text-controls,
body.msd-layout-v2.msd-subpage-open #msd-image-controls { display: none !important; }
/* ⚠ `display: flex` overtrumfer browserens egen `[hidden] { display: none }`. Uden denne
   linje stod BEGGE undersider (Skrifttype OG Farve) permanent i bunden af panelet — altså
   font og farve to gange. Samme fælde er allerede håndteret tre andre steder i filen
   (.msd-toolbar-panel, .msd-textbar-panel, .msd-bg-busy). */
body.msd-layout-v2 .msd-sheet[hidden] { display: none; }
body.msd-layout-v2 .msd-font-list { display: flex; flex-direction: column; gap: 6px; max-height: 52vh; overflow-y: auto; }
body.msd-layout-v2 .msd-font-item {
    padding: 12px 14px; cursor: pointer; text-align: left; font-size: 18px;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--fg);
}
body.msd-layout-v2 .msd-font-item:hover { border-color: var(--pink); background: var(--pink-soft); }
/* v1.239.2 (Johns "det står klodset oven i hinanden — kopiér fra Custom Ink"): stor centreret
   prøve i fonten, navnet gråt under, ingen kasser, luft imellem.
   ⚠ ÅRSAGEN til overlappet: listen er en flex-kolonne med max-height, og knapperne måtte
   KRYMPE (flex-shrink 1 + min-height 0) — 14 fonte blev klemt ned i 52vh og løb ind i
   hinanden. `flex: 0 0 auto` = hver række beholder sin højde, listen ruller i stedet. */
body.msd-layout-v2 .msd-font-list { gap: 4px; max-height: 58vh; }
body.msd-layout-v2 .msd-font-item {
    flex: 0 0 auto !important; display: flex !important; flex-direction: column; align-items: center; gap: 2px;
    height: auto !important; min-height: 0 !important; max-height: none !important;
    padding: 12px 8px 10px !important; margin: 0 !important; text-align: center; line-height: 1.2 !important;
    border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; text-transform: none; letter-spacing: 0;
}
body.msd-layout-v2 .msd-font-item[hidden] { display: none !important; }   /* flex overtrumfer [hidden] */
body.msd-layout-v2 .msd-font-item:hover { border-color: var(--border); background: var(--card); }
body.msd-layout-v2 .msd-font-item.is-on { border: 1px solid var(--pink); background: var(--pink-tint); }
body.msd-layout-v2 .msd-font-item-proeve {
    flex: 0 0 auto; display: block; max-width: 100%; font-size: 30px; line-height: 1.25; color: var(--fg);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
body.msd-layout-v2 .msd-font-item-navn { flex: 0 0 auto; display: block; font-family: var(--font-ui); font-size: 13px; line-height: 1.3; color: var(--muted-fg); font-weight: 400; }
body.msd-layout-v2 .msd-font-search {
    width: 100%; padding: 10px 12px; box-sizing: border-box;
    border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card);
    font-family: var(--font-ui); font-size: var(--fs-body); color: var(--fg);
}
body.msd-layout-v2 .msd-font-item.is-on { border: 2px solid var(--pink); background: var(--pink-tint); }
body.msd-layout-v2 .msd-sheet-empty { margin: 0; padding: 14px; color: var(--muted-fg); font-size: var(--fs-body); }
body.msd-layout-v2 .msd-sheet-done {
    width: 100%; padding: 12px; cursor: pointer; border: none; border-radius: var(--radius-md);
    background: var(--pink); color: #fff; font-family: var(--font-ui); font-weight: var(--fw-strong);
}

/* ── Rotation ───────────────────────────────────────────────────────────────── */
body.msd-layout-v2 .msd-rotation { display: flex; align-items: center; gap: 10px; }
body.msd-layout-v2 .msd-rotation input[type="range"] { flex: 1; accent-color: var(--pink); }
body.msd-layout-v2 .msd-rotation input[type="number"] { width: 62px; text-align: right; }
/* v1.72.0: nulstil rotation — dæmpet mini-knap i rækken, samme formsprog som mini-knapperne */
body.msd-layout-v2 .msd-rotation-reset {
    padding: 6px 10px; font-size: 12px; cursor: pointer; white-space: nowrap;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--fg);
}
body.msd-layout-v2 .msd-rotation-reset:hover { border-color: var(--pink); color: var(--pink); }

/* v1.74.0: tilbuds-vejen — link under kurv-knappen + dialogens felter */
body.msd-layout-v2 .msd-quote-link {
    display: block; width: 100%; margin-top: 8px; padding: 6px 0; cursor: pointer;
    background: none; border: none; color: var(--fg); opacity: .75;
    font-size: 13px; text-decoration: underline; text-underline-offset: 3px;
}
body.msd-layout-v2 .msd-quote-link:hover { opacity: 1; color: var(--pink); }
/* v1.75.0: under 50 stk. — dæmpet, men stadig klikbar (klikket forklarer reglen) */
body.msd-layout-v2 .msd-quote-link.is-dim { opacity: .35; }
body.msd-layout-v2 .msd-quote-link.is-dim:hover { opacity: .5; color: var(--fg); }
/* v1.76.0: to-tilstands-zoom (tekstil) — tekstknap i stedet for -/%/+ */
body.msd-layout-v2 .msd-zoom-toggle { width: auto; padding: 0 14px; font-size: 12px; white-space: nowrap; }
/* v1.76.0: box-zoom — lærredet ud af layoutet, klippet i regionen; forskydning via vars.
   Regionen beholder sin egen størrelse: miniaturer/værktøjs-ø/knapper står bomstille. */
body.msd-layout-v2 .msd-region-canvas.is-boxzoom {
    position: relative; overflow: hidden;
    /* v1.76.2: frosne mål — regionen må ikke kollapse når lærredet tages ud af flowet */
    width: var(--msd-region-lock-w, auto); height: var(--msd-region-lock-h, auto);
    flex: 0 0 auto;
}
body.msd-layout-v2 .msd-region-canvas.is-boxzoom .msd-canvas-wrap {
    position: absolute; left: 0; top: 0; margin: 0;
    transform: translate(var(--msd-box-dx, 0px), var(--msd-box-dy, 0px));
}
.msd-guest-dialog .msd-quote-label { display: block; margin: 10px 0 4px; font-size: 12px; font-weight: 600; }
.msd-guest-dialog .msd-quote-field {
    width: 100%; box-sizing: border-box; padding: 9px 10px; font-size: 14px;
    border: 1px solid var(--border, #d1d1d6); border-radius: 8px;
}
.msd-guest-dialog .msd-quote-error { color: #c62828; font-size: 13px; margin: 8px 0 0; }

/* ── Højde i cm (edit-panelet) ──────────────────────────────────────────────
   ⚠ EGET KLASSENAVN. Hed `.msd-size-stepper` indtil v1.12.0 — samme navn som
   købspanelets antals-stepper i fliserne. Denne regel er den yngste, står
   sidst i filen og har `body.msd-layout-v2` foran, så den vandt begge steder
   og gjorde fliseknapperne 38×38 px. To UI'er må ikke dele et klassenavn. */
body.msd-layout-v2 .msd-cm-stepper { display: flex; align-items: center; gap: 8px; }
body.msd-layout-v2 .msd-cm-stepper button {
    width: 38px; height: 38px; cursor: pointer; font-size: 20px; line-height: 1;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--fg);
}
body.msd-layout-v2 .msd-cm-stepper button:hover { border-color: var(--pink); background: var(--pink-soft); }
body.msd-layout-v2 .msd-cm-stepper input { flex: 1; min-width: 0; text-align: center; }
body.msd-layout-v2 .msd-unit { color: var(--muted-fg); font-size: var(--fs-body); }

/* ── Ikonrækken ─────────────────────────────────────────────────────────────── */
body.msd-layout-v2 .msd-text-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
body.msd-layout-v2 .msd-icon-btn {
    width: 38px; height: 38px; cursor: pointer; font-size: 15px; line-height: 1;
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--fg);
    display: inline-flex; align-items: center; justify-content: center;
}
body.msd-layout-v2 .msd-icon-btn:hover { border-color: var(--pink); background: var(--pink-soft); }
body.msd-layout-v2 .msd-icon-btn.is-on { border: 2px solid var(--pink); background: var(--pink-tint); }
body.msd-layout-v2 .msd-act-sep { width: 1px; height: 24px; background: var(--border); margin: 0 2px; }

/* ── Fortryd ændringer ──────────────────────────────────────────────────────── */
body.msd-layout-v2 .msd-text-footer { border-top: 1px solid var(--border); padding-top: 10px; }
body.msd-layout-v2 .msd-text-reset {
    width: 100%; padding: 10px; cursor: pointer; background: none;
    border: 1px solid var(--border); border-radius: var(--radius-md);
    color: var(--muted-fg); font-family: var(--font-ui); font-size: var(--fs-body);
}
body.msd-layout-v2 .msd-text-reset:hover:not(:disabled) { border-color: var(--pink); color: var(--fg); }
body.msd-layout-v2 .msd-text-reset:disabled { opacity: .4; cursor: default; }

body.msd-layout-v2 .msd-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Mobil: "Tilføj tekst" som bund-sheet, så tastaturet ikke skjuler knappen ── */
@media (max-width: 900px) {
    body.msd-layout-v2 .msd-panel2[data-panel="addtext"] .msd-panel-addtext {
        position: sticky; bottom: 0; background: var(--card);
        padding: 12px; border-top: 1px solid var(--border);
    }
    body.msd-layout-v2 .msd-panel-start { grid-template-columns: 1fr 1fr; }
    body.msd-layout-v2 .msd-font-list { max-height: 44vh; }
}

/* v1.8.0 — FARVEHJULET ÅBNER FRA RÆKKEN (Johns beslutning 26/8), ikke fra en underside.
   Input'et bor derfor i selve rækken. Det skal være usynligt MEN klikbart: `display:none`
   eller `visibility:hidden` gør at browserens farvevælger aldrig åbner, og en input inde i
   en `hidden` beholder kan det heller ikke — dét var netop fejlen i 1.7.0.
   v1.102.1 (Johns fund 4/9, mobil): 1×1 px + pointer-events:none var USYNLIGT for iOS —
   Safari nægter at åbne hjulet for et input uden reel flade. Input'et er nu et usynligt
   OVERLAY over hele rækken: fingeren rammer det NATIVT, og hjulet åbner uden JS-krumspring.
   (Rækkens egen handler springer over når målet er inputtet — ellers to dialoger.) */
body.msd-layout-v2 .msd-control-group[data-row="farve"] { position: relative; }
/* Rækkens swatch viser den VALGTE farve, og kun den. En regnbue ovenpå ville alligevel
   blive slået ihjel af `sw.style.background = hex` (shorthand rydder background-image) —
   og rækken siger allerede "Farve" med en chevron. */
body.msd-layout-v2 .msd-control-group:has(> #msd-color-row) { position: relative; }


/* ── v1.9.1: KVALITETS-MÅLEREN (Johns beslutning 26/8) ───────────────────────────
   "Det er udelukkende en indikator til kunden, af hvor god en trykfil de har."

   ⚠ INGEN GREB og INGEN ENDE-MÅL. Bredden sættes af talfelterne og hjørne-grebene;
   en tredje vej ville bare være et tredje sted at være uenig. Og "1 cm / 10 cm" er
   skalaens yderpunkter — vores regnestykke, ikke kundens opgave.
   ⚠ Zonerne skelnes med MØNSTER, ikke kun kulør: panelet skal kunne bruges uden
   farvesyn og på en telefon i sollys. */
/* v1.82.0 (Johns bestilling 3/9): kvalitets-boksen ved cm-målene. Kantfarven sættes
   af JS (F.dpiBoxColor: grøn ≥300 → glidende gul → glidende rød under 200); her bor
   kun formen. Samme højde/afrunding som cm-felterne, så rækken læses som ét hele. */
body.msd-layout-v2 .msd-artwork-dpi {
    margin-left: auto; padding: 7px 11px;
    border: 2px solid var(--border); border-radius: var(--radius-md);
    font-family: var(--font-ui); font-size: var(--fs-small); font-weight: var(--fw-strong);
    white-space: nowrap; line-height: 1;
}
/* v1.82.0: måleren er flyttet NED under målene og gjort lille (Johns "skal være meget
   mindre"). Læselinjen vises kun ved advarsler (JS sætter hidden). */
body.msd-layout-v2 .msd-size-meter { margin: 8px 0 12px; }
body.msd-layout-v2 .msd-size-track {
    position: relative; height: 6px; border-radius: 3px;
    background:
        linear-gradient(to right, var(--pink) 0 var(--msd-optimal, 60%), transparent var(--msd-optimal, 60%)),
        repeating-linear-gradient(135deg, var(--pink-soft) 0 5px, var(--card) 5px 10px);
    border: 1px solid var(--border);
}
/* En vektorfil har KUN den skarpe zone — hele sporet fyldt, ingen striber. Det er den
   mest overbevisende reklame for ordentlige filer vi kan lave. */
body.msd-layout-v2 .msd-size-track[data-vector="1"] { background: var(--pink); }
/* Markøren viser hvor DETTE tryk ligger. Den kan ikke gribes — pointer-events: none. */
body.msd-layout-v2 .msd-size-marker {
    position: absolute; top: 50%; width: 11px; height: 11px; border-radius: 50%;
    transform: translate(-50%, -50%); pointer-events: none;
    background: var(--card); border: 2px solid var(--fg);
}
body.msd-layout-v2 .msd-size-marker[data-zone="over"] { border-color: var(--danger, #c0392b); }
body.msd-layout-v2 .msd-size-read {
    margin-top: 8px; font-family: var(--font-ui); font-size: var(--fs-small); color: var(--fg);
}
body.msd-layout-v2 .msd-size-read[data-zone="ok"]   { color: var(--fg-muted); }
body.msd-layout-v2 .msd-size-read[data-zone="over"] { color: var(--danger, #c0392b); font-weight: 600; }

/* ── v1.9.5: "GØR SKARPERE MED AI"-DIALOGEN ─────────────────────────────────────
   Kunden VENTER her med vilje (Johns beslutning 26/8): resultatet skal ses efter og
   godkendes, ikke glide ind ubemærket. Derfor en figur der arbejder, et ærligt
   estimat, og en knap der er låst indtil fluebenet er sat. */
body.msd-layout-v2 .msd-ups-dialog {
    background: var(--card); border-radius: var(--radius-lg); padding: 28px;
    max-width: 720px; width: calc(100vw - 32px);
    /* Lavere end skærmen, så fluebenet og knappen ALTID er inde i billedet. */
    max-height: calc(100vh - 64px); overflow: auto; position: relative; text-align: center;
    font-family: var(--font-ui); color: var(--fg);
}
body.msd-layout-v2 .msd-ups-close {
    position: absolute; top: 12px; right: 14px; background: none; border: none;
    font-size: var(--fs-title); line-height: 1; color: var(--fg-muted); cursor: pointer;
}
body.msd-layout-v2 .msd-ups-body { min-height: 200px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 14px; }
body.msd-layout-v2 .msd-ups-wait { font-size: var(--fs-base); color: var(--fg-soft); margin: 0; }
body.msd-layout-v2 .msd-ups-lead { font-size: var(--fs-small); color: var(--fg-muted); margin: 0 0 4px; }

/* ── v1.131.0 — FILENS REJSE (Johns godkendte mockup 7/9) ─────────────────────────
   Afløser bygge-figuren (regel 5): vente-fasen bruger upload-dialogens eget skelet
   (spinner-hoved + grønne trin), så upload → upscale opleves som ÉN dialog der vokser. */
body.msd-layout-v2 .msd-ups-rejse { width: 100%; text-align: left; }
body.msd-layout-v2 .msd-ups-besked {
    margin: 0 0 12px; padding: 12px 14px; border-radius: 12px;
    background: #faf3ee; border: 1px solid #ecd9cc;
    font-size: var(--fs-base); line-height: 1.45; color: var(--fg);
}
body.msd-layout-v2 .msd-ups-firex { display: flex; align-items: center; justify-content: center; gap: 16px; margin: 6px 0 10px; }
body.msd-layout-v2 .msd-ups-fx-boks { display: flex; flex-direction: column; align-items: center; gap: 3px; }
body.msd-layout-v2 .msd-ups-fx-boks svg { width: 68px; height: 68px; border: 1px solid var(--border); border-radius: 10px; background: #fff; display: block; }
body.msd-layout-v2 .msd-ups-fx-boks.is-pixlet svg { image-rendering: pixelated; }
body.msd-layout-v2 .msd-ups-fx-boks.is-skarp svg { box-shadow: 0 0 0 2.5px var(--pink-strong, #4a7d4f); }
body.msd-layout-v2 .msd-ups-fx-boks em { font-style: normal; font-size: 11px; color: var(--fg-muted); }
body.msd-layout-v2 .msd-ups-fx-pil { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 18px; color: var(--fg-muted); }
body.msd-layout-v2 .msd-ups-fx-pil b {
    background: var(--pink-strong, #4a7d4f); color: #fff; font-size: 12px; font-weight: 800;
    border-radius: 999px; padding: 1px 9px;
}
body.msd-layout-v2 .msd-ups-rejse-titel {
    margin: 10px 0 2px; font-size: 12px; font-weight: 800; letter-spacing: .3px;
    text-transform: uppercase; color: var(--pink-strong, #4a7d4f);
}
body.msd-layout-v2 .msd-ups-rejse-trin { width: 100%; }
/* Målingerne under kvalitets-trinnet i upload-dialogens gode slutning. */
.msd-uploadwait-fakta {
    display: block; margin-top: 2px; font-size: 12px; color: var(--pink-strong, #4a7d4f);
    font-weight: 600;
}

/* Før og efter som TRÆK-SLIDER (v1.10.0, Johns beslutning 26/8).
   Forskellen dukker op under kundens egen finger — sværere at klikke forbi end to
   statiske billeder. ⚠ Det klippede billede har FAST pixelbredde (sat af JS), ikke
   width:100%: ellers ville "din fil" skrumpe med beholderen i stedet for at blive
   klippet, og man ville sammenligne to forstørrelser i stedet for før og efter. */
body.msd-layout-v2 .msd-ups-ba {
    /* `max-width` sættes af JS, så billedet aldrig bliver højere end 42 % af skærmen —
       se `maal()`. Centreres, når det er smallere end dialogen. */
    margin: 0 auto;
    position: relative; overflow: hidden; border-radius: var(--radius-md);
    border: 1px solid var(--border); line-height: 0; touch-action: none;
    user-select: none; width: 100%;
}
/* v1.10.4 — FIRE BAGGRUNDE, fordi hver afslører sin egen slags fejl.
   Skakbræt viser ægte gennemsigtighed · hvid viser lyse haloer · sort viser mørke rande
   · 100 % magenta findes ikke i noget rigtigt motiv, så alt der skinner igennem ER et hul.
   Vist mod hvid alene ville en flænset alfa se helt korrekt ud — netop dét lod del
   0-fejlen overleve testen 24/8. */
body.msd-layout-v2 .msd-ups-ba[data-bg="ternet"] {
    background-image:
        linear-gradient(45deg, var(--border) 25%, transparent 25%, transparent 75%, var(--border) 75%),
        linear-gradient(45deg, var(--border) 25%, transparent 25%, transparent 75%, var(--border) 75%);
    background-size: 16px 16px; background-position: 0 0, 8px 8px;
    background-color: var(--card);
}
body.msd-layout-v2 .msd-ups-ba[data-bg="hvid"]    { background: #ffffff; }
body.msd-layout-v2 .msd-ups-ba[data-bg="sort"]    { background: #000000; }
/* v1.238.1: magenta-prøven er erstattet af trøjens farve — sat inline (levende hex), ingen regel her. */

/* v1.84.0: kollisions-kigget — filen vist stort på valgfri prøve-baggrund. Genbruger
   msd-ups-ba's data-bg-baggrunde (id'et deles bevidst, så wireBaggrund virker uændret). */
body.msd-layout-v2 .msd-ups-view {
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-md); overflow: hidden; margin: 4px 0 10px;
    min-height: 200px; max-height: 55vh;
}
body.msd-layout-v2 .msd-ups-view img { max-width: 100%; max-height: 55vh; display: block; }
body.msd-layout-v2 .msd-ups-view[data-bg="hvid"]    { background: #ffffff; }
body.msd-layout-v2 .msd-ups-view[data-bg="sort"]    { background: #000000; }
/* v1.238.1: magenta-prøven er erstattet af trøjens farve — sat inline (levende hex), ingen regel her. */
body.msd-layout-v2 .msd-ups-view[data-bg="ternet"] {
    background-image:
        linear-gradient(45deg, var(--border) 25%, transparent 25%, transparent 75%, var(--border) 75%),
        linear-gradient(45deg, var(--border) 25%, transparent 25%, transparent 75%, var(--border) 75%);
    background-size: 16px 16px; background-position: 0 0, 8px 8px;
    background-color: var(--card);
}
body.msd-layout-v2 .msd-ups-bgs {
    display: flex; align-items: center; gap: 8px; justify-content: center;
    margin: 12px 0 4px; flex-wrap: wrap;
}
body.msd-layout-v2 .msd-ups-bgs-h {
    font-family: var(--font-ui); font-size: var(--fs-small); color: var(--fg-muted);
    margin-right: 4px;
}
/* 30 px: skal kunne rammes med en finger uden at fylde som en knaprække.
   ⚠ `border-radius: 50%` gør ikke noget rundt af sig selv — den følger kassens form.
   Bliver kassen 46×52, får man en oval med runde ender.
   ⚠ OG DET ER TEMAETS KNAP-STYLING DER VINDER, ikke flex. Første forsøg satte
   `flex: 0 0 30px` og troede rækken klemte dem; men de var STØRRE end 30 px, ikke
   mindre — WooCommerce-temaet giver enhver `button` sin egen padding, line-height og
   min-width. Derfor låses ALLE akser her, og `appearance: none` fjerner browserens
   egen knap-form. Selektoren er bevidst et niveau dybere, så den vinder på specificitet
   uden `!important`. */
body.msd-layout-v2 .msd-ups-bgs .msd-ups-bg {
    appearance: none; -webkit-appearance: none;
    flex: 0 0 30px;
    width: 30px; min-width: 30px; max-width: 30px;
    height: 30px; min-height: 30px; max-height: 30px;
    aspect-ratio: 1 / 1;
    padding: 0; margin: 0; line-height: 0; font-size: 0;
    border-radius: 50%; cursor: pointer;
    border: 1px solid var(--border); background-color: transparent;
    box-sizing: border-box; box-shadow: none;
}
body.msd-layout-v2 .msd-ups-bgs .msd-ups-bg[data-bg="ternet"] {
    background-image:
        linear-gradient(45deg, #c9ccd1 25%, transparent 25%, transparent 75%, #c9ccd1 75%),
        linear-gradient(45deg, #c9ccd1 25%, transparent 25%, transparent 75%, #c9ccd1 75%);
    background-size: 10px 10px; background-position: 0 0, 5px 5px; background-color: #fff;
}
body.msd-layout-v2 .msd-ups-bgs .msd-ups-bg[data-bg="hvid"]    { background: #ffffff; }
body.msd-layout-v2 .msd-ups-bgs .msd-ups-bg[data-bg="sort"]    { background: #000000; }
/* v1.238.1: magenta-prøven er erstattet af trøjens farve — sat inline (levende hex), ingen regel her. */
/* Det valgte markeres med en RING, ikke med kulør — farven ER indholdet her. */
body.msd-layout-v2 .msd-ups-bgs .msd-ups-bg[aria-pressed="true"] {
    box-shadow: 0 0 0 2px var(--card), 0 0 0 4px var(--pink);
}
body.msd-layout-v2 .msd-ups-ba img { display: block; }
/* ⚠ INGEN `object-fit` OG INGEN `max-height` HER. Første udkast havde begge dele, og så
   lå de to billeder IKKE oven i hinanden: `contain` lader billedet flyde i sin
   beholder, så "din fil" og "efter AI" blev letterboxet hver sin vej og teksten stod
   dobbelt ("CALIFORNIANIA"). Efter-billedet sætter beholderens højde i normalt flow;
   før-billedet lægges absolut i PRÆCIS samme bredde. Så kan de kun flugte. */
body.msd-layout-v2 .msd-ups-after { width: 100%; height: auto; }
body.msd-layout-v2 .msd-ups-clip { position: absolute; top: 0; left: 0; bottom: 0; overflow: hidden; width: 50%; }
body.msd-layout-v2 .msd-ups-clip img { position: absolute; top: 0; left: 0; height: auto; max-width: none; }
body.msd-layout-v2 .msd-ups-handle {
    position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
    background: var(--card); box-shadow: 0 0 0 1px rgba(0,0,0,.3); cursor: ew-resize;
}
body.msd-layout-v2 .msd-ups-handle span {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    /* 38 px: håndtaget skal kunne gribes med en tommelfinger. */
    width: 38px; height: 38px; border-radius: 50%; background: var(--card);
    box-shadow: 0 1px 5px rgba(0,0,0,.35); display: flex; align-items: center;
    justify-content: center; font-size: var(--fs-base); color: var(--fg);
}
body.msd-layout-v2 .msd-ups-handle:focus-visible { outline: 2px solid var(--pink); outline-offset: 2px; }
body.msd-layout-v2 .msd-ups-tag {
    position: absolute; bottom: 9px; font-size: var(--fs-small);
    background: rgba(0,0,0,.62); color: #fff; padding: 3px 9px; border-radius: 20px;
    line-height: 1.4; pointer-events: none;
}
body.msd-layout-v2 .msd-ups-tag.is-left  { left: 9px; }
body.msd-layout-v2 .msd-ups-tag.is-right { right: 9px; }

body.msd-layout-v2 .msd-ups-foot { margin-top: 18px; }
body.msd-layout-v2 .msd-ups-approve {
    display: flex; align-items: flex-start; gap: 10px; text-align: left;
    font-size: var(--fs-small); color: var(--fg); margin-bottom: 12px; cursor: pointer;
}
/* ⚠ 22 px: fluebenet er godkendelsen. Det skal kunne rammes med en tommelfinger. */
body.msd-layout-v2 .msd-ups-approve input { width: 22px; height: 22px; flex: 0 0 auto; margin: 0; }
body.msd-layout-v2 .msd-ups-apply {
    width: 100%; padding: 14px; border: none; border-radius: var(--radius-md);
    background: var(--pink); color: var(--card);
    font-family: var(--font-ui); font-size: var(--fs-base); font-weight: 600; cursor: pointer;
}
body.msd-layout-v2 .msd-ups-apply:disabled { opacity: 0.45; cursor: not-allowed; }
body.msd-layout-v2 .msd-ups-cancel {
    margin-top: 10px; background: none; border: none; cursor: pointer;
    font-family: var(--font-ui); font-size: var(--fs-small); color: var(--fg-muted);
}
body.msd-layout-v2 .msd-ups-status { color: var(--danger); font-size: var(--fs-small); }

/* ── Genbrug af uploadede filer (v1.43.0 / del A1) ──────────────────────────────
 * Johns ønske: dialogen skal ikke åbne OS-vælgeren med det samme, men vise de filer
 * kunden allerede har lagt i designet — så samme motiv kan bruges flere steder.
 * Er der intet at genbruge, findes markup'en slet ikke, og dialogen ser ud som før. */
/* ⚠ width: 100% er IKKE pynt (v1.56.0, Johns fund 31/8): i startpanelet er forælderen en
   flex-kolonne, og uden eksplicit bredde krympede galleriet til indholdsbredde (målt:
   174 px) — så gitterets auto-fill kun fik plads til ÉN kolonne, og kortene stod i én lang
   lodret række i stedet for 3 ved siden af hinanden. */
.msd-upload-reuse-wrap { margin: 0 0 16px; width: 100%; min-width: 0; }
.msd-upload-reuse-title { margin: 0 0 8px; font-size: 0.9rem; color: var(--muted-fg, #6b6b6b); }
/*
 * ⚠ KOLONNERNE HAR ET LOFT. Med `minmax(84px, 1fr)` blev kolonnen lige så bred som panelet,
 * og krydset — der sidder i kortets hjørne — landede langt ude i siden, fjernt fra sit eget
 * billede (Johns skærmbillede 31/8). En knap strækker sig ikke som et gitter-element, men
 * kortets div gør; de to var derfor ikke lige brede.
 */
.msd-upload-reuse-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 112px));
    justify-content: start;
    /* v1.85.0 (Johns ønske 3/9): dobbelt højde — plads til 3 × 4 kort før der scrolles. */
    gap: 10px; max-height: 420px; overflow-y: auto;
}
.msd-upload-reuse-kort { position: relative; }
/* ⚠ `box-sizing` er ikke arvet af temaets knapper — uden den blev kortet 14 px bredere
   end sin egen kolonne, og krydset landede uden for billedet igen. */
.msd-upload-reuse-kort > .msd-upload-reuse { width: 100%; box-sizing: border-box; }
/* Krydset: kun på huskede filer, og kun tydeligt når man er i nærheden af kortet. */
.msd-upload-reuse-del {
    /* v1.120.0 (Johns ønske 6/9, CustomInk-look): mørk KVADRATISK knap med hvid
       skraldespand i kortets hjørne — ikke den ovale hvide. Stadig INDE i kortet
       (rulle-klip-fælden fra 31/8). */
    position: absolute; top: 5px; right: 5px; z-index: 2;
    /* min/max-height: temaets button-regler strakte knappen til 38.8px (målt 6/9). */
    width: 28px; height: 28px; min-height: 28px; max-height: 28px;
    padding: 0; line-height: 0; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    color: #fff; background: rgba(97, 97, 97, .88);
    border: none; border-radius: 7px;
    opacity: 0; transition: opacity .12s ease;
}
/* v1.120.1 (Johns finish 6/9): ikonet skal FYLDE knappen som hos CustomInk — og en
   inline-svg baseline-forskyder ellers centreringen. */
.msd-upload-reuse-del svg { display: block; }
.msd-upload-reuse-kort:hover .msd-upload-reuse-del,
.msd-upload-reuse-del:focus-visible { opacity: 1; }
.msd-upload-reuse-del:hover { background: rgba(60, 60, 60, .95); }
/* ⚠ Uden mus findes :hover ikke — på berøring skal skraldespanden altid kunne ses. */
@media (hover: none) { .msd-upload-reuse-del { opacity: 1; } }

/* v1.85.0: flueben til flere-ad-gangen. Modsat hjørne af skraldespanden; synligt ved
   hover/fokus, ALTID når det er sat, og altid på berøring. */
.msd-upload-reuse-check {
    /* v1.120.1 (Johns finish 6/9): SAMME størrelse som skraldespands-feltet (28×28),
       og inputtet centreret — margin/appearance nulstilles, temaer sætter dem skævt. */
    position: absolute; top: 5px; left: 5px; z-index: 2;
    width: 28px; height: 28px; box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 1px solid var(--border, #dcdcde); border-radius: 7px;
    box-shadow: 0 1px 3px rgba(0,0,0,.18); cursor: pointer;
    opacity: 0; transition: opacity .12s ease;
}
/* type-selektoren er nødvendig: temaets `input[type=checkbox]`-margin vandt ellers
   kaskaden og skubbede boksen 5px ud af centrum (målt 6/9). */
.msd-upload-reuse-check input[type="checkbox"] {
    width: 16px; height: 16px; flex: none; margin: 0; padding: 0; display: block;
}
.msd-upload-reuse-check input { margin: 0; cursor: pointer; }
.msd-upload-reuse-kort:hover .msd-upload-reuse-check,
.msd-upload-reuse-check:focus-within,
.msd-upload-reuse-check:has(input:checked) { opacity: 1; }
@media (hover: none) { .msd-upload-reuse-check { opacity: 1; } }

/* v1.85.0: "Fjern valgte (N)" — dukker op under gitteret, når mindst ét flueben er sat. */
.msd-upload-reuse-bulkbar { margin-top: 8px; }
.msd-upload-reuse-bulk {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; cursor: pointer;
    font-size: 0.85rem; color: #a11; background: #fff;
    border: 1px solid #a11; border-radius: 8px;
}
.msd-upload-reuse-bulk:hover { background: #fbeaea; }

/* v1.120.0 (CustomInk-look): KVADRATISKE kort — billedet ER kortet, navnet bor i
   tooltip'en. Skakbrættet fylder hele fladen; valgt/hover = markeret kant. */
.msd-upload-reuse {
    display: block; width: 100%; aspect-ratio: 1 / 1;
    padding: 8px; box-sizing: border-box; cursor: pointer;
    border: 2px solid var(--border, #dcdcde); border-radius: 12px;
    background-color: #fff;
    background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
                      linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
    background-size: 14px 14px; background-position: 0 0, 7px 7px;
    overflow: hidden;
}
.msd-upload-reuse:hover, .msd-upload-reuse:focus-visible {
    border-color: var(--pink, #809f82);
}
.msd-upload-reuse img {
    width: 100%; height: 100%; object-fit: contain; display: block;
}

/* Startpanelets udgave: samme gitter, lidt luft over. Tom beholder fylder intet. */
.msd-start-reuse:empty { display: none; }
/* ⚠ `grid-column: 1 / -1` er selve rettelsen (v1.56.0, Johns fund 31/8): startpanelet
   (#msd-panel-start) er et 2-KOLONNERS gitter (Upload/Tekst-kortene), og galleriet landede
   som gitterbarn i ÉN kolonne à 174 px — så dets eget auto-fill kun fik plads til én
   kolonne, og kortene stod i én lang lodret række. Nu spænder det hele rækken, som
   "Skift produkt"-kortet gør, og der er plads til 3 kort ved siden af hinanden. */
.msd-start-reuse { margin-top: 14px; grid-column: 1 / -1; width: 100%; min-width: 0; }
/* "Brug samme design som på …" (PLAN-samme-design): samme fulde bredde — kortet må ikke lande i én kolonne af gitteret. */
.msd-start-samme { grid-column: 1 / -1; width: 100%; min-width: 0; margin-bottom: 4px; }

/* ── v1.91.0: ORDRE-REDIGERING I FRONTEND-EDITOREN (Johns bid 1) ─────────────────────
   Banneret ligger ØVERST og skubber intet — editoren skal se ud som kundens, blot med
   ordre-laget ovenpå. Kunde-handlingerne skjules: de peger på kundens konto/kurv. */
#msd-order-edit-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100000;
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    padding: 10px 18px; background: #1c1c1e; color: #fff;
    font-family: var(--font-ui); font-size: var(--fs-body);
}
#msd-order-edit-bar .msd-oe-knapper { display: flex; align-items: center; gap: 10px; }
#msd-oe-save {
    padding: 9px 18px; cursor: pointer; border: none; border-radius: var(--radius-md);
    background: var(--tt-orange, #b85c38); color: #fff;
    font-size: var(--fs-body); font-weight: var(--fw-strong);
}
#msd-oe-save:hover { background: var(--tt-orange-strong, #a04d2c); }
#msd-oe-back { color: #d9d9de; font-size: var(--fs-small); text-decoration: underline; }
body.msd-order-edit .msd-see-price,
body.msd-order-edit #msd-actions,
body.msd-order-edit .msd-buy-footer,
body.msd-order-edit #msd-quote-open { display: none !important; }
/* v1.91.1 (bid 2): efter et gem fremhæves vejen tilbage til ordren. */
#msd-oe-back.is-klar {
    color: #fff; text-decoration: none;
    padding: 8px 14px; border: 1px solid var(--tt-orange, #b85c38); border-radius: var(--radius-md);
}

/* v1.160.1 (Johns fund på LIVE): sitets nye produktside-CTA'er ("Design nu" /
   "Beregn din pris", injiceret af cmse-extended-product-behavior) fulgte med
   editor-layoutets omplacering af produkt-noderne og dukkede op i venstre panel
   efter upload. Inde i editoren ER kunden i gang — knapperne hører til
   PRODUKTSIDEN og skjules i al editor-sammenhæng. (Klassenavnet er sitets eget;
   omdøbes det, skal denne linje følge med — noteret til udvikler-mødet.) */
.msd-editor-shell .cmse-product-cta-wrap,
.msd-region .cmse-product-cta-wrap { display: none !important; }

/* ── PRODUKT-KATALOG (bid 2) ─────────────────────────────────────────────────────────
   "Katalog"-knappen åbner et overlay med butikkens designbare produkter (fra
   GET /msd/v1/catalog) til hurtigt produktskift. Overlayet bor på <body> — i TEMAETS
   domæne — så indholds-reglerne scopes under #msd-catalog for at slå temaets brede
   span/img/button-regler (målt: temaet tvang navne-spanet til display:flow-root, højde 0).
   Editor-chrome → token-drevet og i token-lintens scope (.msd-catalog-). */
.msd-catalog-sloer {
    position: fixed; inset: 0; z-index: 100002;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(20, 22, 25, .5);
}
#msd-catalog .msd-catalog-dlg {
    box-sizing: border-box;
    display: flex; flex-direction: column;
    width: 100%; max-width: 1400px; max-height: 92vh;   /* TETOS-layout (del 2): sidebar + grid kræver fuld bredde */
    background: var(--card); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
    overflow: hidden;
}
#msd-catalog .msd-catalog-top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 16px 18px 12px;
    border-bottom: 1px solid var(--border);
}
#msd-catalog .msd-catalog-titel {
    margin: 0; font-size: var(--fs-title); font-weight: var(--fw-strong); color: var(--fg);
}
#msd-catalog .msd-catalog-luk {
    flex: 0 0 auto; width: 34px; height: 34px; padding: 0; margin: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: var(--fs-title); line-height: 1; color: var(--fg-soft);
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-pill);
    cursor: pointer;
}
#msd-catalog .msd-catalog-luk:hover { color: var(--fg); border-color: var(--muted-fg); }
#msd-catalog .msd-catalog-soeg {
    box-sizing: border-box; width: auto; margin: 14px 18px 0;
    padding: 10px 14px; font-size: var(--fs-base); color: var(--fg);
    background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-md);
}
#msd-catalog .msd-catalog-soeg:focus { outline: none; border-color: var(--tt-orange); }
#msd-catalog .msd-catalog-status {
    padding: 18px; font-size: var(--fs-body); color: var(--muted-fg); text-align: center;
}
#msd-catalog .msd-catalog-grid {
    /* Ingen egen scroller — layoutet (sidebar + main) scroller som ÉN enhed, som TETOS' side. */
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    align-content: start; gap: 12px; padding: 16px 18px 18px;
}
/* KORTET 1:1 TETOS' .card (del 3, v1.230.0) — afløser bid 2/bid C's kort-regler. */
#msd-catalog .msd-catalog-card {
    box-sizing: border-box; height: auto; margin: 0; padding: 0;
    display: flex; flex-direction: column; align-items: stretch; text-align: left; cursor: pointer;
    background: var(--card); color: var(--fg);
    border: 1px solid var(--border); border-radius: var(--radius-md); overflow: hidden;
    position: relative; transition: box-shadow .15s, transform .15s;
}
#msd-catalog .msd-catalog-card:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, .08); transform: translateY(-2px); }
#msd-catalog .msd-catalog-card.is-current { border-color: var(--tt-orange); cursor: default; }
/* TETOS .imgwrap: kvadratisk, HVID, foto contain-fittet. */
#msd-catalog .msd-catalog-thumbwrap {
    position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden;
    display: flex; align-items: center; justify-content: center; background: var(--card);
}
#msd-catalog .msd-catalog-thumb {
    box-sizing: border-box; display: block; width: 100%; height: 100%; margin: 0;
    object-fit: contain; background: var(--card); border-radius: 0;
}
#msd-catalog .msd-catalog-noimg { display: flex; align-items: center; justify-content: center; font-size: var(--fs-display); color: var(--border); }
#msd-catalog .msd-catalog-name {
    box-sizing: border-box; display: block; width: 100%; margin: 0;
    font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--fg);
    line-height: 1.3; white-space: normal;
}
#msd-catalog .msd-catalog-badge {
    position: absolute; top: 8px; left: 8px; margin: 0;
    padding: 2px 8px; font-size: var(--fs-label); font-weight: var(--fw-strong);
    color: var(--card); background: var(--tt-orange); border-radius: var(--radius-pill);
}
/* Baggrunds-lås på BÅDE html og body: temaet scroller på html, så body alene låser ikke. */
html.msd-catalog-open, body.msd-catalog-open { overflow: hidden; }

@media (max-width: 900px) {
    .msd-catalog-sloer { padding: 0; }
    #msd-catalog .msd-catalog-dlg {
        max-width: none; max-height: none;
        width: 100%; height: 100%; border: 0; border-radius: 0;
    }
    #msd-catalog .msd-catalog-grid { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}

/* ── PRODUKT-KATALOG: KORTETS KROP SOM TETOS (bid C → del 3) ─────────────────────────
   TETOS .body/.pname/.psku/.pprice/.swatches/.gots-badge, tal for tal. Billedet skifter
   til packshot i den valgte farve (bid C). Certifikater nederst (v1.224.3). */
#msd-catalog .msd-catalog-body { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; }
#msd-catalog .msd-catalog-brandline { font-size: var(--fs-label); color: var(--muted-fg); }
#msd-catalog .msd-catalog-pprice { font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--fg); margin-top: 4px; }
#msd-catalog .msd-catalog-pfra { font-weight: var(--fw-normal); color: var(--muted-fg); font-size: var(--fs-label); }
#msd-catalog .msd-catalog-swatches { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 5px; }
#msd-catalog .msd-catalog-sw { width: 13px; height: 13px; border-radius: var(--radius-pill); border: 1px solid rgba(0, 0, 0, .15); }
#msd-catalog .msd-catalog-certs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
#msd-catalog .msd-catalog-cert {
    font-size: var(--fs-tiny); font-weight: var(--fw-bold); padding: 1px 6px; line-height: 1.6;
    border-radius: var(--radius-pill); background: var(--tt-green-bg); color: var(--tt-green);
}

/* ── PRODUKT-KATALOG: LAYOUT SOM TETOS (del 2) ───────────────────────────────────────
   1:1 TETOS' katalog.html: venstre sidebar m. foldbare grupper + "Nulstil filtre",
   quick-filter-strip (brand-logoer) + 6 foldbare kategori-grupper, toolbar (antal +
   sortering). TETOS' variabler mappet på vores tokens. Scopet under #msd-catalog. */

/* TEMA-VÆRN (v1.224.2, Johns "knapperne er meget mindre i TETOS"): tallene ovenfor VAR
   TETOS' — men overlayet bor på <body>, og Flatsomes globale `button`-regel lagde
   uppercase, bolder, letter-spacing .03em, line-height 2.4em, min-height 2.5em,
   margin-bottom 1em og font-size .97em OVENPÅ. Målt: chip 33px høj (TETOS 24), Filtre-knap
   47px (33), logo-knap 15,5px skrift. Nulstilles her for alle knapper/felter i overlayet,
   og skrifttypen sættes til TETOS' system-stak, så de to kataloger tegner ens.
   --fs-small/--fw-bold: TETOS' 12px-chips og 700-vægte findes ikke i UI-skalaen (13/11 og
   400/600) — defineret her, KUN i katalogets scope. */
#msd-catalog {
    --fs-small: 12px; --fs-tiny: 9px; --fw-bold: 700;   /* --fs-tiny: TETOS' .gots-badge 9px */
    --tt-green: #5f8a6b; --tt-green-bg: #edf4ee;   /* TETOS' --green/--green-bg (GOTS-pillen) */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.5;
}
#msd-catalog button, #msd-catalog input, #msd-catalog select, #msd-catalog h2 {
    font-family: inherit; text-transform: none; letter-spacing: 0; line-height: 1.3;
    min-height: 0; margin: 0; box-shadow: none; text-shadow: none; vertical-align: baseline;
}
#msd-catalog button { font-size: var(--fs-body); font-weight: var(--fw-normal); }
#msd-catalog .msd-catalog-head { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border-bottom: 1px solid var(--border); }
#msd-catalog .msd-catalog-search { position: relative; flex: 1 1 200px; min-width: 200px; max-width: 460px; }
#msd-catalog .msd-catalog-soeg {
    box-sizing: border-box; width: 100%; height: 38px; margin: 0; padding: 0 32px 0 12px;
    font-size: var(--fs-base); color: var(--fg); background: var(--bg);
    border: 1px solid var(--border); border-radius: var(--radius-sm);
}
#msd-catalog .msd-catalog-soeg:focus { outline: none; border-color: var(--tt-orange); }
#msd-catalog .msd-catalog-soegx { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 26px; height: 26px; border: 0; background: none; color: var(--muted-fg); font-size: var(--fs-title); cursor: pointer; }

#msd-catalog .msd-catalog-layout {
    display: flex; gap: 18px; padding: 14px 18px 24px; align-items: flex-start;
    /* SCROLLEREN: dialogen er flex-column m. max-height + overflow:hidden; uden dette klippes
       indholdet og hjulet ryger til siden bagved (Johns fund). min-height:0 lader flex-barnet
       krympe under sit indhold; overscroll-behavior stopper scroll-kæden til siden ved enderne. */
    flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
}
#msd-catalog .msd-catalog-main { flex: 1; min-width: 0; }

/* Sidebar (TETOS .sidebar 250px, foldbar) */
#msd-catalog .msd-catalog-sidebar { width: 0; flex-shrink: 0; overflow: hidden; opacity: 0; pointer-events: none; margin-right: -18px; transition: width .2s, opacity .15s, margin .2s; }
#msd-catalog .msd-catalog-sidebar.is-open { width: 250px; opacity: 1; pointer-events: auto; margin-right: 0; }
#msd-catalog .msd-catalog-sbhead { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 8px; }
#msd-catalog .msd-catalog-sblabel { font-size: var(--fs-label); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .08em; color: var(--muted-fg); }
#msd-catalog .msd-catalog-sbclose { background: none; border: 0; color: var(--muted-fg); cursor: pointer; font-size: var(--fs-title); line-height: 1; padding: 0 6px; border-radius: var(--radius-sm); }
#msd-catalog .msd-catalog-sbclose:hover { background: var(--card); color: var(--fg); }
#msd-catalog .msd-catalog-sbbody { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); overflow: hidden; }
#msd-catalog .msd-catalog-reset {
    display: flex; align-items: center; gap: 7px; width: 100%; padding: 9px 12px; margin: 0; box-sizing: border-box;
    font-size: var(--fs-body); font-weight: var(--fw-strong); color: var(--fg); cursor: pointer;
    background: var(--card); border: 0; border-bottom: 1px solid var(--border);
}
#msd-catalog .msd-catalog-reset:hover:not(:disabled) { background: var(--bg); }
#msd-catalog .msd-catalog-reset:disabled { opacity: .45; cursor: default; }
#msd-catalog .msd-catalog-cntpill { margin-left: auto; background: var(--tt-orange); color: var(--card); font-size: var(--fs-label); font-weight: var(--fw-strong); min-width: 18px; height: 18px; padding: 0 6px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; }

#msd-catalog .msd-catalog-fg { border-bottom: 1px solid var(--border); }
#msd-catalog .msd-catalog-fg:last-child { border-bottom: 0; }
#msd-catalog .msd-catalog-fgh { display: flex; align-items: center; gap: 10px; padding: 10px 14px; cursor: pointer; user-select: none; background: var(--card); }
#msd-catalog .msd-catalog-fgh:hover { background: var(--bg); }
#msd-catalog .msd-catalog-chev { color: var(--muted-fg); font-size: var(--fs-label); transition: transform .15s; }
#msd-catalog .msd-catalog-fg.is-open .msd-catalog-chev { transform: rotate(90deg); }
#msd-catalog .msd-catalog-fglabel { flex: 1; font-size: var(--fs-label); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; color: var(--fg); }
#msd-catalog .msd-catalog-fgcount { color: var(--muted-fg); font-size: var(--fs-label); }
#msd-catalog .msd-catalog-fgbadge { background: var(--tt-orange); color: var(--card); font-size: var(--fs-label); font-weight: var(--fw-strong); padding: 1px 7px; border-radius: var(--radius-pill); }
#msd-catalog .msd-catalog-fgb { display: none; padding: 4px 14px 14px; background: var(--bg); }
#msd-catalog .msd-catalog-fg.is-open .msd-catalog-fgb { display: block; }
#msd-catalog .msd-catalog-fsearch { box-sizing: border-box; width: 100%; padding: 6px 10px; margin: 0 0 8px; font-size: var(--fs-small); color: var(--fg); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); }
#msd-catalog .msd-catalog-fsearch:focus { outline: none; border-color: var(--tt-orange); }
#msd-catalog .msd-catalog-fchips { display: flex; gap: 5px; flex-wrap: wrap; }
#msd-catalog .msd-catalog-fchip { padding: 4px 11px; font-size: var(--fs-small); line-height: 1.3; cursor: pointer; color: var(--fg); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-pill); }
#msd-catalog .msd-catalog-fchip:hover { border-color: var(--fg); }
#msd-catalog .msd-catalog-fchip.is-active { background: var(--tt-orange); color: var(--card); border-color: var(--tt-orange); }
#msd-catalog .msd-catalog-fcnt { color: var(--muted-fg); margin-left: 4px; font-size: var(--fs-label); }
#msd-catalog .msd-catalog-fchip.is-active .msd-catalog-fcnt { color: var(--card); }
#msd-catalog .msd-catalog-fempty { color: var(--muted-fg); font-size: var(--fs-label); }
#msd-catalog .msd-catalog-cgrid { gap: 10px; }
#msd-catalog .msd-catalog-cgi { display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer; padding: 4px; border-radius: var(--radius-sm); }
#msd-catalog .msd-catalog-csw { width: 30px; height: 30px; border-radius: var(--radius-pill); border: 2px solid transparent; box-shadow: 0 0 0 1px var(--border) inset; transition: transform .1s; }
#msd-catalog .msd-catalog-cgi:hover .msd-catalog-csw { transform: scale(1.1); }
#msd-catalog .msd-catalog-csw.is-active { border-color: var(--tt-orange); box-shadow: 0 0 0 2px var(--card) inset; }
#msd-catalog .msd-catalog-clbl { font-size: var(--fs-label); color: var(--muted-fg); text-align: center; }
#msd-catalog .msd-catalog-price { display: flex; align-items: center; gap: 6px; }
#msd-catalog .msd-catalog-price input { width: 75px; box-sizing: border-box; padding: 5px 8px; font-size: var(--fs-small); color: var(--fg); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); }
#msd-catalog .msd-catalog-price span { color: var(--muted-fg); font-size: var(--fs-small); }
#msd-catalog .msd-catalog-punit { font-size: var(--fs-label); }

/* Topbar: orange Filtre-knap (TETOS .filter-toggle) + brand-logo-strip (.quick-filters) */
#msd-catalog .msd-catalog-topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
#msd-catalog .msd-catalog-ftoggle { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; font-size: var(--fs-body); font-weight: var(--fw-bold); color: var(--card); background: var(--tt-orange); border: 1px solid var(--tt-orange); border-radius: var(--radius-sm); cursor: pointer; }
#msd-catalog .msd-catalog-ftoggle:hover { background: var(--tt-orange-strong); border-color: var(--tt-orange-strong); }
#msd-catalog .msd-catalog-ham { font-size: var(--fs-base); line-height: 1; }
#msd-catalog .msd-catalog-qf { flex: 1; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
#msd-catalog .msd-catalog-qfb { height: 39px; padding: 6px 11px; display: inline-flex; align-items: center; cursor: pointer; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); transition: border-color .12s, box-shadow .12s; }
#msd-catalog .msd-catalog-qfb:hover { border-color: var(--fg); }
#msd-catalog .msd-catalog-qfb.is-active { border-color: var(--tt-orange); box-shadow: 0 0 0 2px var(--tt-orange) inset; background: var(--bg); }
#msd-catalog .msd-catalog-qfb img { height: 23px; max-width: 106px; object-fit: contain; display: block; }
#msd-catalog .msd-catalog-qftext { font-size: var(--fs-small); font-weight: var(--fw-strong); color: var(--fg); }

/* Quick-kategorier (TETOS .quick-categories: 6 foldbare grupper i én række) */
#msd-catalog .msd-catalog-qc { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px 18px; padding: 12px 2px; margin-bottom: 12px; border-bottom: 1px solid var(--border); align-items: start; }
#msd-catalog .msd-catalog-qcg-title { display: flex; align-items: flex-start; gap: 7px; width: 100%; min-height: 46px; box-sizing: border-box; padding: 6px 2px 0; font-size: var(--fs-base); font-weight: var(--fw-bold); line-height: 1.5; color: var(--fg); text-align: left; background: none; border: 0; border-bottom: 2px solid var(--tt-orange); cursor: pointer; }
#msd-catalog .msd-catalog-qcg-title:hover { color: var(--tt-orange); }
#msd-catalog .msd-catalog-qcchev { color: var(--muted-fg); font-size: var(--fs-base); line-height: 1.3; transition: transform .15s; flex-shrink: 0; }
#msd-catalog .msd-catalog-qcg.is-open .msd-catalog-qcchev { transform: rotate(90deg); color: var(--tt-orange); }
#msd-catalog .msd-catalog-qcname { flex: 1; line-height: 1.25; }
#msd-catalog .msd-catalog-qcbadge { background: var(--tt-orange); color: var(--card); font-size: var(--fs-label); font-weight: var(--fw-strong); min-width: 16px; height: 16px; padding: 0 5px; border-radius: var(--radius-pill); display: inline-flex; align-items: center; justify-content: center; }
#msd-catalog .msd-catalog-qcsubs { display: none; flex-direction: column; padding-top: 2px; }
#msd-catalog .msd-catalog-qcg.is-open .msd-catalog-qcsubs { display: flex; }
#msd-catalog .msd-catalog-qcs { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 4px; font-size: var(--fs-body); color: var(--fg); text-align: left; background: none; border: 0; border-bottom: 1px solid var(--border); cursor: pointer; }
#msd-catalog .msd-catalog-qcs:last-child { border-bottom: 0; }
#msd-catalog .msd-catalog-qcs:hover { background: var(--bg); }
#msd-catalog .msd-catalog-qcs.is-active { background: var(--bg); border-radius: var(--radius-sm); border-bottom-color: transparent; }
#msd-catalog .msd-catalog-qcslabel { display: inline-flex; align-items: center; gap: 7px; }
#msd-catalog .msd-catalog-qcslabel::before { content: '›'; color: var(--muted-fg); font-weight: var(--fw-normal); }
#msd-catalog .msd-catalog-qcs.is-active .msd-catalog-qcslabel { color: var(--tt-orange); font-weight: var(--fw-strong); }
#msd-catalog .msd-catalog-qcs.is-active .msd-catalog-qcslabel::before { color: var(--tt-orange); }
#msd-catalog .msd-catalog-qcscnt { font-size: var(--fs-label); color: var(--muted-fg); font-variant-numeric: tabular-nums; }
#msd-catalog .msd-catalog-qcs.is-active .msd-catalog-qcscnt { color: var(--tt-orange); font-weight: var(--fw-strong); }

/* Toolbar: antal + sortering (TETOS .filter-toolbar) */
#msd-catalog .msd-catalog-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 8px 0 4px; flex-wrap: wrap; gap: 10px; }
#msd-catalog .msd-catalog-count { color: var(--muted-fg); font-size: var(--fs-body); }
#msd-catalog .msd-catalog-sort { width: auto; height: 32px; padding: 0 8px; font-size: var(--fs-small); color: var(--fg); background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; }   /* width:auto — temaet tvinger select til 100 % */
#msd-catalog .msd-catalog-grid { padding: 8px 0 0; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
#msd-catalog .msd-catalog-fscrim { position: fixed; inset: 0; z-index: 30; background: rgba(20, 22, 25, .35); }

@media (max-width: 900px) {
    #msd-catalog .msd-catalog-layout { padding: 10px 12px 20px; }
    #msd-catalog .msd-catalog-sidebar { position: fixed; top: 0; left: 0; bottom: 0; z-index: 31; width: 280px; max-width: 85vw; margin: 0; padding: 12px; background: var(--card); box-shadow: 2px 0 14px rgba(0, 0, 0, .18); overflow-y: auto; opacity: 1; pointer-events: auto; transform: translateX(-100%); transition: transform .2s; }
    #msd-catalog .msd-catalog-sidebar.is-open { width: 280px; transform: none; }
    #msd-catalog .msd-catalog-qc { grid-template-columns: repeat(3, 1fr); gap: 6px 10px; }
    #msd-catalog .msd-catalog-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
}

/* ── v1.239.0: kundens farvehjul (CMYK-klemt) + "Anden farve…" ─────────────────────────
   Browserens <input type="color"> er ude. Paletten er første valg; knappen åbner vores egen
   underside med et S/V-felt (canvas) og en kulør-slider. */
body.msd-layout-v2 .msd-color-other {
    width: 100%; padding: 11px 12px; cursor: pointer; text-align: left;
    border: 1px dashed var(--border); border-radius: var(--radius-md); background: var(--card);
    color: var(--fg); font-family: var(--font-ui); font-size: var(--fs-body);
}
body.msd-layout-v2 .msd-color-other:hover { border-color: var(--pink); background: var(--pink-soft); }
body.msd-layout-v2 .msd-cp-hint { margin: 0; color: var(--muted-fg); font-size: var(--fs-label); }
body.msd-layout-v2 .msd-cp-felt {
    width: 100%; height: auto; aspect-ratio: 280 / 180; display: block;
    border-radius: var(--radius-md); border: 1px solid var(--border); cursor: crosshair; touch-action: none;
}
body.msd-layout-v2 .msd-cp-hue {
    width: 100%; height: 18px; appearance: none; -webkit-appearance: none; border-radius: 9px; outline: none;
    background: linear-gradient(to right, #d32f2f, #e8a92b, #c9c92e, #2e8b3e, #2aa8a0, #2b5fb8, #6f4aa1, #d95a9a, #d32f2f);
}
body.msd-layout-v2 .msd-cp-hue::-webkit-slider-thumb {
    appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
    background: #fff; border: 2px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer;
}
body.msd-layout-v2 .msd-cp-hue::-moz-range-thumb {
    width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 2px solid var(--border); cursor: pointer;
}
body.msd-layout-v2 .msd-cp-row { display: flex; align-items: center; gap: 10px; }
body.msd-layout-v2 .msd-cp-preview { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); flex: 0 0 auto; }
body.msd-layout-v2 .msd-cp-hex { font-size: var(--fs-label); color: var(--muted-fg); }

/* ── v1.241.0: Kant (stroke) — tykkelses-trin i kant-undersiden ───────────────────────────── */
.msd-stroke-trin { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 4px 0 16px; }
.msd-stroke-trin-btn {
    padding: 10px 4px !important; border: 1px solid var(--line, #d9d9de) !important; border-radius: 10px !important;
    background: #fff !important; color: var(--ink, #1c1c1e) !important; font-size: 13px !important; font-weight: 500 !important;
    cursor: pointer; line-height: 1.2 !important; min-height: 0 !important; text-transform: none !important; letter-spacing: 0 !important;
}
.msd-stroke-trin-btn.is-on { border-color: #4a7d4f !important; background: #edf2ed !important; color: #2f5c34 !important; font-weight: 600 !important; }
.msd-stroke-trin-btn:focus-visible { outline: 2px solid #4a7d4f; outline-offset: 2px; }

/* ── v1.243.0: HANDLINGSRÆKKEN (Custom Ink-udtryk) — tekst- og billed-panelet ─────────────── */
.msd-act-row { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: start; margin-top: 6px; }
.msd-act-row .msd-act-group { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.msd-act-row .msd-act-group[hidden] { display: none; }
.msd-act-row .msd-act-btns { display: flex; border: 1px solid var(--pink-border, #d3ded3); border-radius: 10px; overflow: hidden; background: #fff; }
.msd-act-row .msd-act-btn {
    width: 64px !important; height: 52px !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
    border: none !important; border-radius: 0 !important; background: #fff !important; color: var(--fg, #1c1c1e) !important;
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: none !important;
}
.msd-act-row .msd-act-btn + .msd-act-btn { border-left: 1px solid var(--pink-border, #d3ded3) !important; }
.msd-act-row [data-flere="1"] .msd-act-btn { width: 44px !important; }
.msd-act-row .msd-align-buttons .msd-act-btn { width: 34px !important; color: var(--muted-fg, #8a8a8e) !important; }
.msd-act-row .msd-act-btn:hover { background: var(--pink-tint, #f5f8f5) !important; }
.msd-act-row .msd-act-btn.is-on { background: var(--pink-soft, #edf2ed) !important; color: var(--fg, #1c1c1e) !important; }
.msd-act-row .msd-act-btn.msd-is-disabled, .msd-act-row .msd-act-btn:disabled { opacity: .38; cursor: default; }
.msd-act-row .msd-act-btn svg { display: block; }
.msd-act-row .msd-act-label { font-family: var(--font-ui); font-size: 12px; color: var(--fg, #1c1c1e); white-space: nowrap; }
.msd-artwork-actions { margin: 14px 0 4px; }

/* ── v1.244.0: Tekst-form (bue) — styrke-slider i form-undersiden ─────────────────────────── */
.msd-shape-trin { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.msd-shape-styrke { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.msd-shape-styrke[hidden] { display: none; }
.msd-shape-styrke label { font-family: var(--font-ui); font-size: 12px; color: var(--muted-fg, #8a8a8e); }
.msd-shape-styrke input[type="range"] { flex: 1 1 auto; accent-color: var(--pink, #809f82); }
.msd-shape-range-val { font-family: var(--font-ui); font-size: 12px; color: var(--fg, #1c1c1e); min-width: 36px; text-align: right; font-variant-numeric: tabular-nums; }

/* ── v1.246.0: skrifttype-undersiden i Custom Inks to niveauer (kategori-gitter → liste) ───── */
body.msd-layout-v2 .msd-font-nylig {
    display: block; width: 100%; margin: 8px 0 4px; padding: 6px 0 !important; border: none !important; background: none !important;
    font-family: var(--font-ui); font-size: 13px !important; color: var(--pink-strong, #5f7f62) !important; cursor: pointer; text-align: center;
}
body.msd-layout-v2 .msd-font-nylig[hidden] { display: none; }
body.msd-layout-v2 .msd-font-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; max-height: 58vh; overflow-y: auto; padding-bottom: 6px; }
body.msd-layout-v2 .msd-font-grid[hidden] { display: none; }
body.msd-layout-v2 .msd-font-flise {
    display: flex !important; align-items: center; justify-content: center; min-height: 84px !important; height: auto !important; padding: 12px 10px !important; margin: 0 !important;
    background: var(--muted, #f2f2f7) !important; border: 1px solid transparent !important; border-radius: 12px !important; cursor: pointer; text-transform: none !important; letter-spacing: 0 !important;
}
body.msd-layout-v2 .msd-font-flise:hover { border-color: var(--pink-border, #d3ded3) !important; background: var(--pink-tint, #f5f8f5) !important; }
body.msd-layout-v2 .msd-font-flise-navn { display: block; font-size: 22px; line-height: 1.15; color: var(--fg, #1c1c1e); text-align: center; overflow-wrap: anywhere; }
body.msd-layout-v2 .msd-font-flise[data-kategori="alle"] .msd-font-flise-navn { font-family: var(--font-ui); font-weight: 700; font-size: 18px; }
body.msd-layout-v2 .msd-font-listhead { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 8px 0 6px; }
body.msd-layout-v2 .msd-font-listhead[hidden] { display: none; }
body.msd-layout-v2 .msd-font-listback { padding: 6px 0 !important; border: none !important; background: none !important; font-family: var(--font-ui); font-size: 13px !important; color: var(--pink-strong, #5f7f62) !important; cursor: pointer; }
body.msd-layout-v2 .msd-font-listtitle { font-family: var(--font-ui); font-size: 12px; color: var(--muted-fg, #8a8a8e); white-space: nowrap; }
body.msd-layout-v2 .msd-font-list[hidden] { display: none; }
/* Bunden af kategori-listen: "Prøv en anden kategori" (Custom Ink) */
body.msd-layout-v2 .msd-font-listfoot { flex: 0 0 auto; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border, #e5e5ea); }
body.msd-layout-v2 .msd-font-listfoot-h { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; margin-bottom: 12px; font-family: var(--font-ui); }
body.msd-layout-v2 .msd-font-listfoot-h strong { font-size: 14px; color: var(--fg, #1c1c1e); }
body.msd-layout-v2 .msd-font-listfoot-h span { font-size: 13px; color: var(--muted-fg, #8a8a8e); }
body.msd-layout-v2 .msd-font-listfoot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
body.msd-layout-v2 .msd-font-listfoot-kat {
    display: flex !important; flex-direction: column; align-items: flex-start; gap: 1px; height: auto !important; min-height: 0 !important;
    padding: 8px 10px !important; margin: 0 !important; border: 1px solid var(--border, #e5e5ea) !important; border-radius: 8px !important;
    background: #fff !important; cursor: pointer; text-align: left; text-transform: none !important; letter-spacing: 0 !important; line-height: 1.25 !important;
}
body.msd-layout-v2 .msd-font-listfoot-kat:hover { background: var(--pink-tint, #f5f8f5) !important; border-color: var(--pink-border, #d3ded3) !important; }
body.msd-layout-v2 .msd-font-listfoot-navn { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--pink-strong, #5f7f62); }
body.msd-layout-v2 .msd-font-listfoot-antal { font-family: var(--font-ui); font-size: 11px; color: var(--muted-fg, #8a8a8e); }

/* ── v1.250.0: KUNDENS ARKIV (pop-up + linjen i upload-dialogen; Johns mockup 22/9) ── */
.msd-arkiv-sloer { position: fixed; inset: 0; background: rgba(20, 22, 25, .45); display: flex; align-items: center; justify-content: center; z-index: 100002; padding: 16px; }
.msd-arkiv-dialog { width: min(600px, 100%); max-height: 92vh; overflow-y: auto; box-sizing: border-box; background: #fff; border-radius: 20px; padding: 32px 32px 24px; box-shadow: 0 18px 50px rgba(0, 0, 0, .25); font-family: var(--font-ui, inherit); color: #1d1d1f; display: flex; flex-direction: column; gap: 16px; }
.msd-arkiv-titel { margin: 0; font-size: 22px; font-weight: 700; }
.msd-arkiv-tekst { margin: 0; font-size: 15px; line-height: 1.5; color: #3a3a3c; }
.msd-arkiv-forbrug { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; background: #f6f7f4; border-radius: 12px; }
.msd-arkiv-forbrug-linje { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; }
.msd-arkiv-forbrug-linje span { font-size: 13px; color: #6e6e73; }
.msd-arkiv-bar { height: 10px; border-radius: 6px; background: #e3e6df; overflow: hidden; }
.msd-arkiv-bar-lille { height: 6px; }
.msd-arkiv-bar-fyld { height: 100%; background: #5f7f62; }
.msd-arkiv-bar-fyld.is-fuld { background: #b35b3a; }
.msd-arkiv-sektion { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #6e6e73; margin-top: 4px; }
.msd-arkiv-tom { margin: 0; font-size: 14px; color: #6e6e73; }
.msd-arkiv-design { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #e5e5e7; border-radius: 12px; }
.msd-arkiv-design.is-laast { opacity: .7; }
.msd-arkiv-thumb { width: 44px; height: 44px; border-radius: 8px; background: #e9ecef; object-fit: cover; flex: 0 0 auto; display: block; }
.msd-arkiv-design-tekst { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.msd-arkiv-design-navn { font-size: 14px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.msd-arkiv-design-meta { font-size: 12px; color: #6e6e73; }
.msd-arkiv-design-mb { font-size: 14px; font-weight: 700; white-space: nowrap; }
.msd-arkiv-slet, .msd-arkiv-luk { border: 1.5px solid #d1d1d6; border-radius: 10px; background: #fff; padding: 8px 12px; font-size: 13px; font-weight: 600; cursor: pointer; color: #1d1d1f; }
.msd-arkiv-luk { border-radius: 12px; padding: 11px 18px; font-size: 15px; }
.msd-arkiv-laast { font-size: 12px; color: #6e6e73; white-space: nowrap; }
.msd-arkiv-ubrugte { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: #edf5ee; border-radius: 12px; }
.msd-arkiv-ubrugte.is-tom { background: #f6f7f4; }
.msd-arkiv-ubrugte-tekst { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; }
.msd-arkiv-ubrugte-tekst b { font-size: 14px; color: #2f6b3a; }
.msd-arkiv-ubrugte.is-tom b { color: #3a3a3c; }
.msd-arkiv-ubrugte-tekst span { font-size: 12px; color: #3a5a40; }
.msd-arkiv-ryd { border: none; border-radius: 10px; background: #5f7f62; color: #fff; padding: 9px 14px; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; }
.msd-arkiv-ryd:disabled { opacity: .6; cursor: default; }
.msd-arkiv-fod { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-top: 4px; }
.msd-arkiv-fod span { font-size: 12px; color: #6e6e73; }
.msd-arkiv-linje { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-top: 10px; background: #f6f7f4; border-radius: 10px; }
.msd-arkiv-linje-tekst { flex: 1 1 auto; display: flex; flex-direction: column; gap: 6px; }
.msd-arkiv-linje-top { display: flex; justify-content: space-between; font-size: 13px; }
.msd-arkiv-linje-top span { color: #6e6e73; }
.msd-arkiv-aabn { border: none; background: none; color: #b35b3a; font-size: 13px; font-weight: 700; cursor: pointer; white-space: nowrap; padding: 4px 0; }
@media (max-width: 600px) { .msd-arkiv-dialog { padding: 22px 18px 18px; } .msd-arkiv-design { flex-wrap: wrap; } }

/* ── v1.251.3: antal-vagten — størrelses-feltet blinker rødt ved 0 stk ── */
@keyframes msd-alarm-blink { 0%, 100% { box-shadow: 0 0 0 0 rgba(217, 48, 37, 0); } 25%, 75% { box-shadow: 0 0 0 3px rgba(217, 48, 37, .55); } 50% { box-shadow: 0 0 0 3px rgba(217, 48, 37, .15); } }
.msd-buy-sizes.is-alarm, form.cart .quantity.is-alarm { animation: msd-alarm-blink 1.2s ease-in-out 2; border-radius: var(--radius-md); }
.msd-buy-sizes.is-alarm .msd-size-tile { border-color: var(--danger); }
@media (prefers-reduced-motion: reduce) { .msd-buy-sizes.is-alarm, form.cart .quantity.is-alarm { animation: none; box-shadow: 0 0 0 3px rgba(217, 48, 37, .55); } }

/* ── v1.252.5: ordre-bundet editor — antal låst til ordren ── */
.msd-size-tile.is-locked .msd-size-spin { display: none; }
.msd-size-tile.is-locked .msd-size-qty { opacity: .75; pointer-events: none; }
.msd-size-locked-note { margin: 8px 0 0; opacity: .7; }

/* ── v1.252.6: ordre-tilstand ("design senere") — købets elementer væk, farven låst ── */
body.msd-ordre-tilstand .msd-buy-totals,
body.msd-ordre-tilstand .msd-delivery,
body.msd-ordre-tilstand .msd-buy-handling,
body.msd-ordre-tilstand .msd-offer-linje-ret,
body.msd-ordre-tilstand .msd-sample,
body.msd-ordre-tilstand #msd-quote-open,
body.msd-ordre-tilstand .msd-offer-valg-pris,
body.msd-ordre-tilstand .msd-offer-note,
body.msd-ordre-tilstand .msd-buy-hint,
body.msd-ordre-tilstand .msd-tb-rush { display: none !important; }
/* v1.252.8: "Færdiggør design →" er længere end "Se din pris →" — ved 1024 px klemte topbjælken
   knappen 7 px under teksten (målt 25/9). Knappen krymper ikke; produktnavnet (afkortet) giver plads. */
body.msd-ordre-tilstand #msd-tb-see-price { flex-shrink: 0; }
/* Den lange knaptekst må ikke klippes: knappen fylder slottet i ordre-tilstand. */
body.msd-layout-v2.msd-ordre-tilstand .msd-region-right form.cart .msd-offer-slot .msd-textile-cta {
    width: 100% !important; max-width: none !important; white-space: normal !important;
    height: auto !important; line-height: 1.25 !important; padding: 14px 16px !important;
}
body.msd-ordre-tilstand .msd-buy-swatches.is-locked { pointer-events: none; opacity: .85; }
.msd-ordre-resume { display: flex; flex-direction: column; gap: 4px; margin: 0 0 12px; }
.msd-ordre-resume-tekst { opacity: .8; }
.msd-ordre-resume-note { margin-top: 6px; font-size: .9em; opacity: .7; }   /* v1.252.8: 24-timers-noten */

/* ── v1.254.0: TILBUDS-TILSTAND (kom via "Gratis tilbud"-popup'en, ?msd_tilbud=1) ──
   Samme to knapper, byttet vægt: "Få et gratis, uforpligtende tilbud →" er den store orange
   knap i fuld bredde; "eller læg i kurv og gå til betaling" er det lille, grå link UNDER den.
   Stablet frem for side om side: på mobil klemte rækken linket ned til ét ord pr. linje, og
   knappen lå oven i det (målt 390 px). Stablet virker i alle bredder. */
body.msd-layout-v2.msd-tilbud-tilstand .msd-offer-slot .msd-buy-ctas {
    flex-direction: column; align-items: stretch; gap: 10px;
}
/*
   Specificiteten matcher den fulde kæde fra 1.v2-reglerne (se ⚠ SPECIFICITET ovenfor). */
body.msd-layout-v2.msd-tilbud-tilstand .msd-region-right form.cart .msd-offer-slot .msd-textile-cta {
    order: 1; flex: 0 0 auto; width: 100%; min-width: 0; margin-left: 0; text-align: center;
    background: none !important; border: 0 !important; color: var(--muted-fg) !important;
    height: auto !important; line-height: 1.35 !important; padding: 0 !important;
    font-size: var(--fs-small) !important; font-weight: var(--fw-normal) !important;
    text-decoration: underline; text-underline-offset: 3px; box-shadow: none !important;
}
body.msd-layout-v2.msd-tilbud-tilstand .msd-region-right form.cart .msd-offer-slot .msd-textile-cta:hover {
    background: none !important; color: var(--fg) !important;
}
body.msd-layout-v2.msd-tilbud-tilstand .msd-offer-slot .msd-buy-ctas .msd-quote-link {
    order: 0; flex: 0 0 auto; width: 100%; margin: 0; padding: 0 16px;
    min-height: 54px; line-height: 1.25; text-align: center;
    display: flex; align-items: center; justify-content: center;
    background: var(--tt-orange); color: var(--card); opacity: 1;
    border-radius: var(--radius-md); text-decoration: none;
    font-size: var(--fs-title); font-weight: var(--fw-strong);
}
body.msd-layout-v2.msd-tilbud-tilstand .msd-offer-slot .msd-buy-ctas .msd-quote-link:hover { background: var(--tt-orange-strong); color: var(--card); }
/* Under 50 stk. forbliver knappen fuldt synlig — klikket forklarer reglen ("Tilbud beregnes fra 50 stk."). */
body.msd-layout-v2.msd-tilbud-tilstand .msd-offer-slot .msd-buy-ctas .msd-quote-link.is-dim { opacity: 1; }

/* ── NAVNE & NUMRE-skærmen (PLAN-navne-numre bid 3a) — samme ramme som "Tilføj tekst". ── */
body.msd-layout-v2 .msd-panel-nn { display: none; }
body.msd-layout-v2 .msd-panel2[data-panel="nn"] .msd-panel-nn { display: flex; flex-direction: column; gap: 12px; }
body.msd-layout-v2 .msd-panel2[data-panel="nn"] #msd-panel-start,
body.msd-layout-v2 .msd-panel2[data-panel="nn"] .msd-summary { display: none; }
/* v1.268.5: et valgt navne & numre-lag åbner DENNE skærm — "Rediger element" (#msd-sidebar, vist af
   .is-editing) må ikke stå halvt under den. Skrift og farve vælges her; teksten i listen. */
body.msd-layout-v2 .msd-panel2[data-panel="nn"] #msd-sidebar { display: none; }
/* … men navnelisten (rækkerne med blyant og ×) bor i .msd-summary → #msd-designer-wrap og skal stadig kunne ses
   under skærmen, når laget er valgt. .is-editing skjuler i forvejen titel, pris, form.cart og #msd-actions. */
body.msd-layout-v2 .msd-panel2[data-panel="nn"].is-editing .msd-summary { display: flex; }
.msd-nn-intro { margin: 0; color: var(--muted-fg, #6e6e73); font-size: .92em; line-height: 1.45; }
.msd-nn-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.msd-nn-label { min-width: 84px; font-weight: 600; font-size: .92em; }
.msd-nn-check { display: inline-flex; align-items: center; gap: 6px; font-size: .95em; }
.msd-nn-pills { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.msd-nn-pill { border: 1px solid #d1d1d6; background: #fff; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: .9em; cursor: pointer; }
.msd-nn-pill.is-on { background: var(--msd-green, #1d7c3a); border-color: var(--msd-green, #1d7c3a); color: #fff; font-weight: 600; }
.msd-nn-font { flex: 1; min-width: 160px; padding: 6px 8px; border: 1px solid #d1d1d6; border-radius: 8px; font: inherit; }
.msd-nn-farver { display: flex; gap: 6px; flex-wrap: wrap; }
.msd-nn-swatch.is-on { outline: 2px solid #1c1c1e; outline-offset: 2px; }
#msd-rail-nn[hidden], #msd-start-nn[hidden] { display: none !important; }

/* ── Modalen "Skriv navne og numre" (PLAN-navne-numre bid 3b) — bygger på .msd-guest-dialog. ── */
.msd-nn-liste { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 12px; border: 1px solid #d1d1d6; border-radius: 10px; background: #fbfbfd; font-size: .92em; }
.msd-nn-btn { border: 1px solid var(--msd-green, #1d7c3a); color: var(--msd-green, #1d7c3a); background: transparent; border-radius: 999px; padding: 6px 14px; font: inherit; font-size: .9em; font-weight: 600; cursor: pointer; }
.msd-nn-btn.is-primary { background: var(--msd-green, #1d7c3a); color: #fff; }
.msd-nn-btn.is-big { padding: 10px 22px; font-size: 1em; }
.msd-nn-btn:disabled { opacity: .45; cursor: not-allowed; }
.msd-guest-dialog.msd-nn-dialog { max-width: 940px; width: calc(100% - 24px); padding: 0; overflow: hidden; max-height: calc(100vh - 32px); display: flex; flex-direction: column; }
.msd-nn-dhead { display: flex; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--border, #e3e3e8); }
.msd-nn-dhead > div { flex: 1; }
.msd-nn-dhead .msd-guest-title { margin: 0; font-size: 18px; }
.msd-nn-eyebrow { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--msd-green, #1d7c3a); font-weight: 700; }
.msd-nn-link { border: 0; background: transparent; color: var(--msd-green, #1d7c3a); font: inherit; font-weight: 600; cursor: pointer; }
.msd-nn-link.is-ghost { color: #6e6e73; font-weight: 400; }
.msd-nn-link:disabled { opacity: .45; cursor: not-allowed; }
.msd-nn-dbody { display: grid; grid-template-columns: 260px 1fr; gap: 18px; padding: 16px 18px; overflow: auto; }
.msd-nn-prev { display: flex; flex-direction: column; gap: 8px; }
.msd-nn-card { aspect-ratio: 1 / 1.25; background: #fff; border: 1px solid #d1d1d6; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; overflow: hidden; }
.msd-nn-pn { font-size: 30px; line-height: 1; white-space: nowrap; transform-origin: center; display: inline-block; }
.msd-nn-pnr { font-size: 120px; line-height: .95; white-space: nowrap; transform-origin: center; display: inline-block; }
.msd-nn-card { overflow: hidden; }
.msd-nn-card.is-tom .msd-nn-pn, .msd-nn-card.is-tom .msd-nn-pnr { opacity: .3; }
/* v1.268.6: kortet er TRYKBOKSEN i lille skala — aspect-ratio, top og font-size sættes fra samme geometri som trøjen
   (F.nnKortLayout). Teksten står centreret i boksens fulde bredde og klemmes vandret som på trøjen (M.nnFit). */
.msd-nn-card.is-boks { display: block; position: relative; aspect-ratio: 260 / 350; }
.msd-nn-card.is-boks .msd-nn-pn, .msd-nn-card.is-boks .msd-nn-pnr {
    position: absolute; left: 50%; transform: translateX(-50%); transform-origin: center;
    line-height: 1.13; white-space: nowrap; display: inline-block;
}
.msd-nn-prev small { color: #6e6e73; text-align: center; }
.msd-nn-hint { color: #6e6e73; font-size: 12.5px; margin: 0 0 8px; }
.msd-nn-table { width: 100%; border-collapse: collapse; }
.msd-nn-table th { text-align: left; font-size: 12px; color: #6e6e73; font-weight: 600; padding: 0 6px 6px; }
.msd-nn-table td { padding: 3px 6px; vertical-align: middle; }
.msd-nn-idx { width: 26px; color: #6e6e73; font-size: 12px; text-align: right; }
.msd-nn-table select, .msd-nn-table input[type=text] { width: 100%; border: 1px solid #d1d1d6; border-radius: 8px; background: #fbfbfd; color: inherit; font: inherit; padding: 7px 8px; min-height: 0; }
.msd-nn-navn { text-transform: uppercase; }
.msd-nn-nr { text-align: center; }
.msd-nn-sz { width: 110px; } .msd-nn-nrc { width: 90px; } .msd-nn-del { width: 34px; }
.msd-nn-table tr.is-fejl select { border-color: #b00020; background: #fdecee; }
.msd-nn-table tr.is-aktiv td { background: #e6f3ea; }
.msd-nn-del button { border: 0; background: transparent; color: #6e6e73; cursor: pointer; font-size: 16px; padding: 4px; }
.msd-nn-del button:hover { color: #b00020; }
.msd-nn-add { display: flex; gap: 10px; align-items: center; margin: 8px 0 12px; flex-wrap: wrap; }
.msd-nn-add .msd-nn-hint { margin: 0; }
.msd-nn-bulk { display: none; margin-bottom: 12px; }
.msd-nn-bulk.is-on { display: block; }
.msd-nn-bulk textarea { width: 100%; height: 96px; min-height: 96px; max-height: 240px; resize: vertical; border: 1px solid #d1d1d6; border-radius: 8px; padding: 8px; font: inherit; background: #fbfbfd; margin-bottom: 4px; }
.msd-nn-totals { background: #fbfbfd; border: 1px solid #e5e5ea; border-radius: 10px; padding: 10px 12px; font-size: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.msd-nn-wide { grid-column: 1 / -1; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.msd-nn-chip { background: #fff; border: 1px solid #e5e5ea; border-radius: 999px; padding: 2px 10px; }
.msd-nn-chip.is-fejl { color: #b00020; }
.msd-nn-pris { grid-column: 1 / -1; font-weight: 600; margin-top: 4px; }
.msd-nn-fejl { color: #b00020; font-size: 12.5px; margin-top: 6px; display: none; }
.msd-nn-fejl.is-on { display: block; }
.msd-nn-dfoot { display: flex; gap: 14px; align-items: center; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--border, #e3e3e8); }
@media (max-width: 760px) {
    .msd-nn-dbody { grid-template-columns: 1fr; }
    .msd-nn-prev { display: none; }   /* John 30/9: intet preview på mobil */
    .msd-nn-dhead .msd-nn-link { display: none; }
    .msd-nn-table, .msd-nn-table thead, .msd-nn-table tbody, .msd-nn-table tr, .msd-nn-table td { display: block; }
    .msd-nn-table thead { display: none; }
    .msd-nn-table tr { border: 1px solid #e5e5ea; border-radius: 10px; padding: 8px; margin-bottom: 8px; display: grid; grid-template-columns: 26px 1fr 1fr 34px; gap: 6px; align-items: center; }
    .msd-nn-navnc { grid-column: 2 / 4; }
    .msd-nn-sz, .msd-nn-nrc, .msd-nn-del { width: auto; }
}

/* Navne & numre — låste størrelsesfelter (bid 3c): samme udseende som ordre-låsen + "Ret listen". */
.msd-nn-size-note { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.msd-nn-size-note .msd-nn-link { padding: 0; }

/* ── Navne & numre-skærmen efter RushOrderTees (bid 3d): én linje pr. valg, værdien til højre i egen skrift. ── */
body.msd-layout-v2 .msd-panel2[data-panel="nn"] .msd-panel-nn { gap: 0; }
.msd-nn-row { display: flex; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid #e5e5ea; flex-wrap: wrap; }
.msd-nn-row.msd-nn-first { border-top: 0; padding-top: 6px; }
.msd-nn-label { min-width: 84px; font-weight: 500; font-size: .95em; }
.msd-nn-checks { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; }
.msd-nn-checks label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: .95em; }
.msd-nn-checks input { width: 18px; height: 18px; accent-color: var(--msd-green, #1d7c3a); margin: 0; }
.msd-nn-val { flex: 1; display: flex; justify-content: flex-end; align-items: center; }
.msd-nn-dd { position: relative; }
.msd-nn-dd-btn { border: 2px solid var(--msd-green, #1d7c3a); background: #fff; color: #1c1c1e; border-radius: 12px; padding: 6px 12px 5px 16px; cursor: pointer; display: inline-flex; align-items: center; gap: 12px; min-width: 150px; justify-content: space-between; font: inherit; }
.msd-nn-dd-v { font-family: Impact, "Arial Narrow Bold", "Helvetica Neue", sans-serif; font-size: 1.35em; letter-spacing: .03em; line-height: 1.1; text-transform: uppercase; }
.msd-nn-dd-caret { color: var(--msd-green, #1d7c3a); font-size: .7em; }
.msd-nn-dd-menu { display: none; position: absolute; right: 0; top: calc(100% + 6px); background: #fff; border: 1px solid #e5e5ea; border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,.16); padding: 6px; z-index: 30; min-width: 190px; max-height: 320px; overflow: auto; }
.msd-nn-dd.is-open .msd-nn-dd-menu { display: block; }
.msd-nn-dd-menu button { display: block; width: 100%; text-align: left; border: 0; background: transparent; padding: 9px 14px; border-radius: 8px; cursor: pointer; font: inherit; font-size: 1.15em; text-transform: uppercase; color: #1c1c1e; }
.msd-nn-dd-menu button:hover, .msd-nn-dd-menu button.is-on { background: #e6f3ea; }
.msd-nn-dd-menu button.is-on::after { content: " \2713"; color: var(--msd-green, #1d7c3a); }
.msd-nn-color { border: 0; background: transparent; display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font: inherit; padding: 4px 0; }
.msd-nn-color-name { font-weight: 700; }
.msd-nn-color-swatch { width: 30px; height: 30px; border-radius: 9px; border: 2px solid rgba(0,0,0,.15); display: inline-block; }
.msd-nn-farver { width: 100%; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 10px; }
.msd-nn-farver[hidden] { display: none; }
.msd-nn-swatch.is-on { outline: 3px solid var(--msd-green, #1d7c3a); outline-offset: 2px; }
.msd-nn-cta { margin-top: 14px; border-radius: 999px !important; }