/* ==========================================================================
   BILMO DESIGN SYSTEM — v4 (canonical, aligned with brand.md v4)
   Kilde: brand.md v4 (2026-04-21) + konsolidering af produktions-tokens
   Lever nu i: themes/bricks-child/assets/css/design-system.css
   Migreret: 2026-04-23 (fra Bricks → Settings → Custom Code → Custom CSS)
   Enqueued af: themes/bricks-child/functions.php med filemtime cache-busting
   ========================================================================== */
:root {
    /* ---------- TEKST ---------- */
    --bm-ink:                  #1D1D1F;   /* Primær tekst, overskrifter */
    --bm-ink-muted:            #6B7A73;   /* Sekundær tekst */
    --bm-ink-soft:             #86868B;   /* Tertiær, "Ukendt", disabled, meta */
    --bm-ink-subtle:           #8E9892;   /* Search placeholder + icon */
    --bm-ink-on-dark:          #FFFFFF;
    --bm-ink-on-dark-muted:    rgba(255, 255, 255, 0.6);
    --bm-ink-on-dark-subtle:   rgba(255, 255, 255, 0.7);

    /* ---------- OVERFLADER ---------- */
    --bm-surface:              #FFFFFF;
    --bm-surface-alt:          #F5F5F7;   /* Soft gray — kort, sektioner */
    --bm-surface-alt-2:        #EAEAEC;   /* Section-link hover */
    --bm-surface-card:         #F5F5F7;
    --bm-surface-card-hover:   #EDEEEF;   /* Card hover (én tone mørkere) */
    --bm-surface-input:        #F4F6F5;   /* Forside hero search bg */
    --bm-surface-frost:        rgba(255, 255, 255, 0.88);

    /* ---------- DARK ---------- */
    --bm-dark:                 #0B2418;   /* Signatur grøn-sort */
    --bm-dark-soft:            #081B12;   /* Nested mørk på mørk */

    /* ---------- GREENS ---------- */
    --bm-green:                #9FE870;   /* Primær CTA, accent */
    --bm-green-vibrant:        #80E143;   /* CTA hover */
    --bm-green-glow:           rgba(159, 232, 112, 0.18);   /* Focus ring, glow */
    --bm-green-glow-soft:      rgba(159, 232, 112, 0.08);   /* Radial sektion-glow */

    /* ---------- RATING PALETTE (Kuffert & Kørehandsker 1-10) ---------- */
    --bm-electric:             #6BE838;   /* 9-10 */
    --bm-lime:                 #C6E858;   /* 7-8 */
    --bm-yellow:               #FFD600;   /* 5-6 */
    --bm-red:                  #FF5C5C;   /* 1-4 */

    /* ---------- BORDERS ---------- */
    --bm-border-hairline:      1px solid rgba(0, 0, 0, 0.08);
    --bm-border-dark:          1px solid rgba(255, 255, 255, 0.03);

    /* ---------- RADII ---------- */
    --bm-radius-xs:            8px;
    --bm-radius-sm:            12px;
    --bm-radius-md:            20px;
    --bm-radius-lg:            28px;   /* Signatur card-radius */
    --bm-radius-pill:          999px;

    /* ---------- SHADOWS (brand.md canonical scale) ---------- */
    --bm-shadow-badge:         0 2px 8px rgba(11, 36, 24, 0.14);
    --bm-shadow-pill:          0 6px 16px -6px rgba(11, 36, 24, 0.4);
    --bm-shadow-card-subtle:   0 4px 20px rgba(0, 0, 0, 0.04);
    --bm-shadow-image-soft:    0 16px 40px rgba(0, 0, 0, 0.05);
    --bm-shadow-panel:         0 20px 40px -8px rgba(11, 36, 24, 0.18), 0 2px 6px rgba(0, 0, 0, 0.06);
    --bm-shadow-dropdown:      0 24px 64px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.05);
    --bm-shadow-dock:          0 24px 60px -12px rgba(11, 36, 24, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.9);
    --bm-shadow-card-dark:     0 12px 40px rgba(0, 0, 0, 0.2);
    --bm-shadow-focus:         0 12px 32px rgba(0, 0, 0, 0.15);
    --bm-shadow-lift:          0 24px 64px rgba(0, 0, 0, 0.20), 0 4px 12px rgba(0, 0, 0, 0.05);

    /* ---------- CONTAINERS (brand.md 3 tiers + 1 article) ---------- */
    --bm-container-narrow:     1140px;   /* Editorial, pitch */
    --bm-container:            1280px;   /* Standard grid */
    --bm-container-wide:       1440px;   /* Listing */
    --bm-container-article:    900px;    /* Bilside / artikel læse-bredde */

    /* ---------- TYPOGRAFI ---------- */
    --bm-font-body:            'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --bm-font-display:         'dazzle-unicase', 'Dazzle Unicase', sans-serif;
    --bm-tracking-tight:       -0.02em;
    --bm-tracking-tighter:     -0.03em;

    /* ---------- SECTION PADDING ---------- */
    --bm-section-py-tight:     80px;
    --bm-section-py:           100px;
    --bm-section-py-loose:     120px;

    /* ---------- EASING (brand.md 4 canonical curves) ---------- */
    --bm-ease-signature:       cubic-bezier(0.2, 0.8, 0.2, 1);     /* default transform, image zoom */
    --bm-ease-drawer:          cubic-bezier(0.2, 0.85, 0.25, 1);   /* drawer slide */
    --bm-ease-spring:          cubic-bezier(0.16, 1, 0.3, 1);      /* input focus spring */
    --bm-ease-fade:            cubic-bezier(0.25, 1, 0.5, 1);      /* card fadeInUp */
    --bm-transition:           0.2s ease;
    --bm-transition-slow:      0.4s cubic-bezier(0.16, 1, 0.3, 1);

    /* ---------- Z-INDEX ---------- */
    --bm-z-sticky:             100;
    --bm-z-overlay:            900;
    --bm-z-modal:              1000;
    --bm-z-toast:              1100;
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --bm-transition:       0ms;
        --bm-transition-slow:  0ms;
    }
}

/* ==========================================================================
   LAYOUT — sticky footer
   ========================================================================== */
html, body { margin: 0; padding: 0; }
body { display: flex; flex-direction: column; min-height: 100vh; }
#brx-content, main, .brx-main { flex: 1 0 auto; }
.bm-footer, footer { flex-shrink: 0; }

/* ==========================================================================
   CONTAINERS
   ========================================================================== */
.bm-container,
.bm-container--wide,
.bm-container--narrow,
.bm-container--article {
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
    box-sizing: border-box;
}
.bm-container          { max-width: var(--bm-container); }
.bm-container--wide    { max-width: var(--bm-container-wide); }
.bm-container--narrow  { max-width: var(--bm-container-narrow); }
.bm-container--article { max-width: var(--bm-container-article); }

/* ==========================================================================
   SEKTIONER
   ========================================================================== */
.bm-section {
    padding: var(--bm-section-py) 0;
    background-color: var(--bm-surface);
    font-family: var(--bm-font-body);
}
.bm-section--alt   { background-color: var(--bm-surface-alt); }
.bm-section--dark  { background-color: var(--bm-dark); color: var(--bm-ink-on-dark); }
.bm-section--tight { padding: var(--bm-section-py-tight) 0; }
.bm-section--loose { padding: var(--bm-section-py-loose) 0; }
@media (max-width: 767px) {
    .bm-section, .bm-section--loose { padding: 64px 0; }
    .bm-section--tight { padding: 48px 0; }
}

/* ==========================================================================
   HERO — dark surface + radial grøn glow
   ========================================================================== */
.bm-hero {
    position: relative;
    background-color: var(--bm-dark);
    padding: var(--bm-section-py) 0 var(--bm-section-py-tight);
    font-family: var(--bm-font-body);
    color: var(--bm-ink-on-dark);
    z-index: 10;
    overflow: hidden;
    isolation: isolate;
}
.bm-hero-bg { position: absolute; inset: 0; overflow: hidden; z-index: 1; pointer-events: none; }
.bm-hero-bg::before {
    content: '';
    position: absolute;
    top: -20%;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle, var(--bm-green-glow-soft) 0%, transparent 60%);
}
.bm-hero--l .bm-hero-bg::before { width: 1200px; height: 1200px; opacity: 1; }
.bm-hero--m .bm-hero-bg::before { width: 1000px; height: 1000px; opacity: 0.85; }
.bm-hero--s .bm-hero-bg::before { width: 700px;  height: 700px;  opacity: 0.55; }
.bm-hero-inner { position: relative; z-index: 2; }
@media (max-width: 767px) { .bm-hero { padding: 60px 0; } }

/* ==========================================================================
   TYPOGRAFI
   ========================================================================== */
.bm-title-display {
    /* Hero H1 — Dazzle Unicase (KUN her, aldrig H2/H3) */
    font-family: var(--bm-font-display) !important;
    font-size: clamp(42px, 7vw, 72px);
    font-weight: 700 !important;
    color: var(--bm-ink-on-dark) !important;
    text-transform: uppercase;
    line-height: 1.05;
    letter-spacing: 0;
    margin: 0 0 16px 0;
    text-align: center;
}
.bm-title-section {
    font-family: var(--bm-font-body);
    font-size: clamp(36px, 4vw, 48px);
    font-weight: 600;
    line-height: 1.1;
    color: var(--bm-ink);
    letter-spacing: var(--bm-tracking-tight);
    margin: 0;
    text-transform: none;
}
.bm-title-section--on-dark { color: var(--bm-ink-on-dark); }
.bm-title-card {
    font-family: var(--bm-font-body);
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bm-ink);
    letter-spacing: var(--bm-tracking-tight);
    margin: 0 0 8px 0;
}
.bm-lead {
    font-family: var(--bm-font-body);
    font-size: 20px;
    font-weight: 500;
    color: var(--bm-ink-on-dark-muted);
    margin: 0;
    text-align: center;
}
.bm-lead--on-light { color: var(--bm-ink-muted); }
.bm-body {
    font-family: var(--bm-font-body);
    font-size: 18px;
    line-height: 1.6;
    color: var(--bm-ink-muted);
    margin: 0 0 20px 0;
}
.bm-body:last-child { margin-bottom: 0; }
.bm-text-muted { color: var(--bm-ink-muted); }
.bm-text-ink   { color: var(--bm-ink); }
.bm-price-xl {
    font-family: var(--bm-font-body);
    font-size: 40px;
    font-weight: 800;
    color: var(--bm-ink);
    letter-spacing: var(--bm-tracking-tighter);
    line-height: 1;
}

/* ==========================================================================
   KNAPPER
   ========================================================================== */
.bm-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bm-green);
    color: var(--bm-dark);
    padding: 14px 60px;
    border-radius: var(--bm-radius-pill);
    font-family: var(--bm-font-body);
    font-weight: 700;
    font-size: 22px;
    line-height: 1;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background-color var(--bm-transition);
}
.bm-btn-primary:hover,
.bm-btn-primary:focus-visible {
    background-color: var(--bm-green-vibrant);
    color: var(--bm-dark);
    text-decoration: none;
}
.bm-btn-primary--block { width: 100%; max-width: 380px; }
.bm-btn-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--bm-font-body);
    font-size: 15px;
    font-weight: 600;
    color: var(--bm-ink);
    text-decoration: none;
    background-color: var(--bm-surface-alt);
    padding: 12px 20px;
    border-radius: var(--bm-radius-pill);
    transition: background-color var(--bm-transition), transform 0.3s ease;
    white-space: nowrap;
    border: none;
    cursor: pointer;
}
.bm-btn-pill:hover {
    background-color: var(--bm-surface-alt-2);
    text-decoration: none;
    color: var(--bm-ink);
}
.bm-btn-pill svg { transition: transform 0.3s ease; }
.bm-btn-pill:hover svg { transform: translateX(4px); }

/* ==========================================================================
   SEARCH PILL
   ========================================================================== */
.bm-search { position: relative; width: 100%; max-width: 380px; margin: 0 auto; z-index: 100; }
.bm-search--wide { max-width: 720px; }
.bm-search-input-wrap { position: relative; display: flex; align-items: center; }
.bm-search-icon {
    position: absolute;
    left: 20px;
    color: var(--bm-ink-subtle);
    transition: color 0.3s ease;
    pointer-events: none;
}
.bm-search-input-wrap:focus-within .bm-search-icon { color: var(--bm-dark); }
.bm-search-input {
    width: 100%;
    height: 56px;
    box-sizing: border-box;
    padding: 0 44px 0 52px;
    background-color: var(--bm-surface-input);
    border: 1px solid transparent;
    border-radius: var(--bm-radius-pill);
    font-family: var(--bm-font-body);
    font-size: 16px;
    font-weight: 500;
    color: var(--bm-ink);
    transition: all var(--bm-transition-slow);
}
.bm-search-input::placeholder { color: var(--bm-ink-subtle); font-weight: 400; }
.bm-search-input:focus {
    outline: none;
    background-color: var(--bm-surface);
    border: 1px solid var(--bm-dark);
    box-shadow: var(--bm-shadow-focus);
    /* Brand-regel: ingen translateY på hover/focus — kun border + shadow skifter */
}
.bm-search-results {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    right: 0;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(224, 229, 226, 0.5);
    border-radius: var(--bm-radius-md);
    box-shadow: var(--bm-shadow-lift);
    max-height: 320px;
    overflow-y: auto;
    z-index: 99999 !important;
    padding: 8px 0;
}
.bm-search-result-item {
    padding: 12px 24px;
    margin: 0 8px;
    cursor: pointer;
    font-family: var(--bm-font-body);
    font-size: 15px;
    font-weight: 500;
    color: var(--bm-ink-muted);
    transition: all var(--bm-transition);
    text-align: left;
    display: block;
    border-radius: var(--bm-radius-sm);
}
.bm-search-result-item:hover { background: var(--bm-surface-input); color: var(--bm-ink); }
.bm-search-highlight { color: var(--bm-ink); font-weight: 700; }

/* ==========================================================================
   CARDS
   ========================================================================== */
.bm-card {
    background-color: var(--bm-surface-card);
    border-radius: var(--bm-radius-lg);
    padding: 40px 32px;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--bm-ink);
    transition: background-color 0.32s, transform 0.3s ease;
}
.bm-card:hover { background-color: var(--bm-surface-card-hover); text-decoration: none; color: var(--bm-ink); }
.bm-card--min-tall { min-height: 480px; }
.bm-card--dark {
    background-color: var(--bm-dark-soft);
    border: var(--bm-border-dark);
    border-radius: var(--bm-radius-lg);
    padding: 56px 40px;
    box-shadow: var(--bm-shadow-card-dark);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--bm-ink-on-dark);
}
.bm-card--dark:hover { background-color: var(--bm-dark-soft); }
@media (max-width: 767px) {
    .bm-card       { padding: 32px 24px; min-height: auto; }
    .bm-card--dark { padding: 40px 24px; }
}

/* ==========================================================================
   SEKTIONS-HEADER (titel + "Se alle X →")
   ========================================================================== */
.bm-section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
    flex-wrap: wrap;
    gap: 16px;
}
@media (max-width: 767px) {
    .bm-section-header { flex-direction: column; align-items: flex-start; margin-bottom: 32px; }
}

/* ==========================================================================
   STATS-STRIPE
   ========================================================================== */
.bm-stats {
    display: flex;
    align-items: center;
    gap: 48px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: var(--bm-border-hairline);
}
.bm-stat { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; }
.bm-stat-num {
    font-family: var(--bm-font-body);
    font-size: 32px;
    font-weight: 700;
    color: var(--bm-ink);
    line-height: 1;
    letter-spacing: var(--bm-tracking-tight);
    white-space: nowrap;
}
.bm-stat-label { font-size: 15px; color: var(--bm-ink-muted); font-weight: 400; line-height: 1; }
.bm-stat-divider { width: 1px; height: 40px; background-color: rgba(0, 0, 0, 0.10); }
@media (max-width: 767px) {
    .bm-stats { flex-direction: column; align-items: flex-start; gap: 24px; }
    .bm-stat-divider { display: none; }
    .bm-stat { align-items: flex-start; text-align: left; }
}

/* ==========================================================================
   STATUS-PILL
   ========================================================================== */
.bm-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--bm-radius-pill);
    font-family: var(--bm-font-body);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.005em;  /* Apple-stramning, ikke et CAPS-label */
    line-height: 1;
    white-space: nowrap;
    /* Brand-regel: ALDRIG uppercase. Kun Dazzle-H1 må være caps. */
}
.bm-pill--ghost { background-color: var(--bm-dark-soft); border: var(--bm-border-dark); color: var(--bm-ink-on-dark-muted); }
.bm-pill--green { background-color: var(--bm-green); color: var(--bm-dark); font-weight: 700; font-size: 14px; }
.bm-pill--muted { background-color: var(--bm-surface-alt); color: var(--bm-ink); }

/* ==========================================================================
   RATING-BADGE (Kuffert & Kørehandsker score, 1-10)
   Brand.md: SORT tekst på alle farver undtagen TBD
   ========================================================================== */
.bm-score {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    padding: 6px 12px;
    border-radius: var(--bm-radius-sm);
    font-family: var(--bm-font-body);
    font-weight: 800;
    font-size: 18px;
    line-height: 1;
    color: var(--bm-dark);
    background-color: var(--bm-surface-alt);
    box-shadow: var(--bm-shadow-badge);
}
.bm-score--red      { background-color: var(--bm-red);       color: var(--bm-dark); }  /* 1-4 */
.bm-score--yellow   { background-color: var(--bm-yellow);    color: var(--bm-dark); }  /* 5-6 */
.bm-score--lime     { background-color: var(--bm-lime);      color: var(--bm-dark); }  /* 7-8 */
.bm-score--green,
.bm-score--electric { background-color: var(--bm-electric);  color: var(--bm-dark); }  /* 9-10 */
.bm-score--tbd { background-color: var(--bm-ink); color: var(--bm-ink-on-dark); font-size: 10px; letter-spacing: 0.04em; }

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */
@keyframes bm-fade-in-up {
    from { opacity: 0; transform: translate3d(0, 20px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.bm-enter       { animation: bm-fade-in-up 0.6s var(--bm-ease-fade) both; }
.bm-enter--d1   { animation-delay: 0.00s; }
.bm-enter--d2   { animation-delay: 0.15s; }
.bm-enter--d3   { animation-delay: 0.30s; }

/* ==========================================================================
   SIDE-SPECIFIKKE MAX-WIDTHS
   ========================================================================== */
.bm-page-bilside .bm-content,
.bm-page-article .bm-content {
    max-width: var(--bm-container-article);
    margin: 0 auto;
    padding: 0 24px;
}
.bm-page-listing .bm-content {
    max-width: var(--bm-container-wide);
    margin: 0 auto;
    padding: 0 24px;
}

/* ==========================================================================
   PHASE-CONDITIONAL VISIBILITY (body data-phase)
   ========================================================================== */
body[data-phase="kommer_snart"]     .bm-hide-on-kommer,
body[data-phase="ingen_anmeldelse"] .bm-hide-on-ingen,
body[data-phase="forst_set"]        .bm-hide-on-forstset,
body[data-phase="udgaaet"]          .bm-hide-on-udgaaet {
    display: none !important;
}

/* ==========================================================================
   BILSIDE HERO ([bilmo_hero] shortcode)
   ========================================================================== */
.bm-hero-20 {
    position: relative;
    background: var(--bm-dark);
    overflow: hidden;
    isolation: isolate;
    padding: 12px 24px 16px;
    font-family: var(--bm-font-body);
    color: var(--bm-ink-on-dark);
}
.bm-hero-20__inner {
    position: relative;
    z-index: 1;
    max-width: var(--bm-container-article);
    margin: 0 auto;
    padding: 0 24px;
}
.bm-hero-20__content { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.bm-hero-20__title {
    font-family: var(--bm-font-body);
    font-weight: 600;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.05;
    letter-spacing: var(--bm-tracking-tight);
    color: #fff;
    margin: 0 0 8px 0;
    text-transform: none;
}
.bm-hero-20__tagline { font-size: 18px; color: rgba(255, 255, 255, 0.72); line-height: 1.5; margin: 0 0 12px 0; max-width: 44ch; }
.bm-hero-20__chips { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 0; }

/* Breadcrumbs indeni [bilmo_hero] */
.bm-hero-20__breadcrumbs { margin: 0 0 8px 0; padding: 0; }
.bm-hero-20__breadcrumbs nav,
.bm-hero-20__breadcrumbs .bm-breadcrumbs { padding: 0; margin: 0; font-size: 14px; color: rgba(255, 255, 255, 0.72); background: transparent; }
.bm-hero-20__breadcrumbs ol,
.bm-breadcrumbs ol { padding: 0; margin: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.bm-hero-20__breadcrumbs li,
.bm-breadcrumbs li { padding: 0; margin: 0; display: flex; align-items: center; gap: 8px; }
.bm-hero-20__breadcrumbs li:not(:last-child)::after,
.bm-breadcrumbs li:not(:last-child)::after { content: '›'; color: rgba(255, 255, 255, 0.35); }
.bm-hero-20__breadcrumbs a,
.bm-breadcrumbs a { color: rgba(255, 255, 255, 0.72); text-decoration: none; transition: color var(--bm-transition); }
.bm-hero-20__breadcrumbs a:hover,
.bm-breadcrumbs a:hover { color: #fff; }
.bm-hero-20__breadcrumbs [aria-current="page"],
.bm-breadcrumbs [aria-current="page"] { color: rgba(255, 255, 255, 0.55); font-weight: 400; }

/* Standalone [bilmo_breadcrumbs] (udenfor hero, på lys baggrund) */
.bm-breadcrumbs-standalone .bm-breadcrumbs,
.bm-breadcrumbs-standalone .bm-breadcrumbs a,
.bm-breadcrumbs-standalone .bm-breadcrumbs [aria-current="page"] { color: var(--bm-ink-muted); }
.bm-breadcrumbs-standalone .bm-breadcrumbs a:hover { color: var(--bm-ink); }
.bm-breadcrumbs-standalone .bm-breadcrumbs li:not(:last-child)::after { color: var(--bm-ink-soft); }

/* Chips i hero */
.bm-chip { display: inline-flex; align-items: center; background: transparent; border: 0; padding: 0; height: auto; color: #fff; box-sizing: border-box; }
.bm-chip--price { gap: 4px; }
.bm-chip--price .bm-chip__label,
.bm-chip--price .bm-chip__value {
    font-family: var(--bm-font-body);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: 0;
    text-transform: none;
    color: rgba(255, 255, 255, 0.75);
}
.bm-chip--neutral { padding: 4px 10px; border-radius: var(--bm-radius-xs); background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.9); }
.bm-chip--neutral .bm-chip__label { font-size: 12px; color: rgba(255, 255, 255, 0.6); margin-right: 4px; }
.bm-chip--neutral .bm-chip__value { font-size: 14px; font-weight: 600; }

/* Rating chip med data-score */
.bm-chip--rating { padding: 4px 10px; border-radius: var(--bm-radius-xs); background: var(--bm-lime); color: var(--bm-dark); }
.bm-chip--rating .bm-chip__value {
    font-family: var(--bm-font-body);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--bm-dark);
}
.bm-chip--rating[data-score="1"],
.bm-chip--rating[data-score="2"],
.bm-chip--rating[data-score="3"],
.bm-chip--rating[data-score="4"] { background: var(--bm-red); }
.bm-chip--rating[data-score="5"],
.bm-chip--rating[data-score="6"] { background: var(--bm-yellow); }
.bm-chip--rating[data-score="7"],
.bm-chip--rating[data-score="8"] { background: var(--bm-lime); }
.bm-chip--rating[data-score="9"],
.bm-chip--rating[data-score="10"] { background: var(--bm-electric); }

/* CTA i hero */
.bm-hero-20__cta { margin-top: 16px; }
.bm-hero-20__cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--bm-radius-pill);
    background: var(--bm-green);
    color: var(--bm-dark);
    font-family: var(--bm-font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background 160ms ease;
}
.bm-hero-20__cta-btn:hover,
.bm-hero-20__cta-btn:focus-visible {
    background: var(--bm-green-vibrant);
    color: var(--bm-dark);
    /* Brand-regel: ingen translateY — farveskift bærer hoveret */
}
.bm-hero-20__cta-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
@media (max-width: 900px) { .bm-hero-20 { padding: 8px 16px 12px; } }
@media (max-width: 520px) {
    .bm-hero-20 { padding: 8px 16px 12px; }
    .bm-hero-20__title { margin-bottom: 8px; }
    .bm-hero-20__tagline { margin-bottom: 12px; }
    .bm-chip--price .bm-chip__label,
    .bm-chip--price .bm-chip__value { font-size: 14px; }
    .bm-hero-20__cta { margin-top: 12px; }
    .bm-hero-20__cta-btn { width: 100%; justify-content: center; }
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */
.bm-u-hide           { display: none !important; }
.bm-u-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; }
.bm-u-center         { text-align: center; }
.bm-u-mt-0           { margin-top: 0 !important; }
.bm-u-mb-0           { margin-bottom: 0 !important; }
.bm-u-radius-lg      { border-radius: var(--bm-radius-lg); }
.bm-u-shadow-subtle  { box-shadow: var(--bm-shadow-card-subtle); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.bm-footer {
    background-color: var(--bm-surface-alt);
    color: var(--bm-ink);
    font-family: var(--bm-font-body);
    padding: 80px 0 32px;
    width: 100%;
    box-sizing: border-box;
}
.bm-footer-container { max-width: var(--bm-container); margin: 0 auto; padding: 0 24px; width: 100%; box-sizing: border-box; }
.bm-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; }
.bm-footer-brand-col { display: flex; flex-direction: column; gap: 16px; max-width: 320px; }
.bm-footer .bm-footer-logo,
img.bm-footer-logo { display: block; height: 32px !important; width: auto !important; max-width: 140px; margin-bottom: 8px; object-fit: contain; }
.bm-footer-tagline { font-size: 15px; font-weight: 400; color: var(--bm-ink-muted); line-height: 1.5; margin: 0; }
.bm-footer-socials { display: inline-flex; gap: 12px; align-items: center; margin-top: 12px; }
.bm-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--bm-surface);
    color: var(--bm-ink);
    text-decoration: none;
    box-shadow: var(--bm-shadow-card-subtle);
    transition: background var(--bm-transition) var(--bm-ease-signature),
                color var(--bm-transition) var(--bm-ease-signature),
                box-shadow var(--bm-transition) var(--bm-ease-signature);
}
.bm-social-btn:hover,
.bm-social-btn:focus-visible {
    background: var(--bm-dark);
    color: var(--bm-green);
    box-shadow: var(--bm-shadow-pill);
    /* Brand-regel: ingen translateY — farveskift + skygge-lift bærer hoveret */
}
.bm-social-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.bm-footer-col { display: flex; flex-direction: column; }
.bm-footer-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 20px; }
.bm-footer-links li { margin: 0; padding: 0; }
.bm-footer-links a {
    font-size: 15px;
    font-weight: 400;
    color: var(--bm-ink);
    text-decoration: none;
    line-height: 1.5;
    transition: color var(--bm-transition) var(--bm-ease-signature);
}
.bm-footer-links a:hover,
.bm-footer-links a:focus-visible { color: var(--bm-ink-muted); }
.bm-footer-bottom { padding-top: 32px; border-top: var(--bm-border-hairline); font-size: 13px; color: var(--bm-ink-soft); line-height: 1.5; }
.bm-footer-bottom a { color: var(--bm-ink-soft); text-decoration: none; transition: color var(--bm-transition) var(--bm-ease-signature); }
.bm-footer-bottom a:hover { color: var(--bm-ink); }
@media (max-width: 900px) {
    .bm-footer { padding: 64px 0 24px; }
    .bm-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px 32px; padding-bottom: 40px; }
    .bm-footer-brand-col { grid-column: 1 / -1; max-width: 480px; }
}
@media (max-width: 520px) {
    .bm-footer { padding: 48px 0 24px; }
    .bm-footer-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 32px; }
    .bm-footer-brand-col { max-width: none; }
}