/* ==========================================================================
   Lanbyte Loan Compare - Frontend v1.0.0
   Tre stilar: editorial, magazine, compact
   Lanbyte-palett: märkesblå #28528d (CTA/lånerader) | djupblå #193357 (paneler)
                   dämpad amber #c98a1a (betyg) | varma neutraler #f8f7f1/#e7e3d6
   ========================================================================== */

/* -------- LANBYTE FÄRGTEMA --------
   Varje värde läser i första hand sajtens globala --lab-token och faller
   tillbaka på en hårdkodad kopia. Byter du en färg i den globala CSS:en
   följer pluginen med automatiskt, utan att något behöver ändras här.
   Sätts på :root så att både [companytable]-listor och enskilda
   företagssidor (utanför .skkc-listing) använder samma palett. -------- */
:root {
    --skk-primary: var(--lab-brand-dark, #193357);       /* djupblå - paneler (editorial/magazine), rank-bar */
    --skk-primary-dark: #10233b;                          /* mörkare blå - gradient + hover */
    --skk-accent: var(--lab-note, #c98a1a);               /* dämpad amber - stjärnor, rank-badge, kategori */
    --skk-accent-dark: #a06d13;                           /* mörkare amber */
    --skk-green: var(--lab-ok, #5a7d3a);                  /* olivgrön - bockar i USP-listor */
    --skk-amber: #8a5a10;
    --skk-amber-light: var(--lab-note-bg, #f9f2e0);
    --skk-bg: var(--lab-surface, #ffffff);
    --skk-bg-soft: var(--lab-surface-alt, #f8f7f1);       /* varm off-white */
    --skk-bg-warm: var(--lab-brand-soft, #ebf0f7);        /* ljusblå - disclosure/logoruta */
    --skk-border: var(--lab-border, #e7e3d6);             /* varm ram */
    --skk-text: var(--lab-text, #1a2230);
    --skk-text-soft: var(--lab-muted, #5b6675);
    --skk-text-strong: #0f1723;                           /* rubriker */

    /* Primär CTA = märkesblå (matchar sajtens --lab-brand) */
    --skkc-primary: var(--lab-brand-dark, #193357);
    --skkc-cta: var(--lab-brand, #28528d);
    --skkc-cta-dark: var(--lab-brand-dark, #193357);

    /* Typografi: rubriker följer sajtens rubriktypsnitt, brödtext dess brödtypsnitt */
    --skkc-head-font: var(--lab-head-font, inherit);
    --skkc-body-font: var(--lab-body-font, inherit);
}

:root,
.skkc-listing {
    --skkc-primary: var(--skk-primary, #193357);
    --skkc-primary-dark: var(--skk-primary-dark, #10233b);
    --skkc-accent: var(--skk-accent, #c98a1a);
    --skkc-accent-dark: var(--skk-accent-dark, #a06d13);
    --skkc-green: var(--skk-green, #5a7d3a);
    --skkc-amber: var(--skk-amber, #8a5a10);
    --skkc-amber-light: var(--skk-amber-light, #f9f2e0);
    --skkc-bg: var(--skk-bg, #ffffff);
    --skkc-bg-soft: var(--skk-bg-soft, #f8f7f1);
    --skkc-bg-warm: var(--skk-bg-warm, #ebf0f7);
    --skkc-border: var(--skk-border, #e7e3d6);
    --skkc-text: var(--skk-text, #1a2230);
    --skkc-text-soft: var(--skk-text-soft, #5b6675);
    --skkc-text-strong: var(--skk-text-strong, #0f1723);
    --skkc-radius: var(--lab-radius-sm, 10px);
    --skkc-radius-lg: var(--lab-radius, 12px);
    --skkc-shadow: 0 1px 3px rgba(15, 23, 42, 0.07), 0 1px 2px rgba(15, 23, 42, 0.04);
    --skkc-shadow-hover: var(--lab-shadow, 0 6px 20px rgba(15, 23, 42, 0.08));
    font-family: inherit;
}

/* Disclosure */
.skkc-disclosure {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: var(--skkc-bg-warm);
    border-left: 3px solid var(--skkc-accent);
    padding: 12px 16px;
    margin: 0 0 1.8em;
    border-radius: 0 var(--skkc-radius) var(--skkc-radius) 0;
    font-size: 0.92em;
    color: var(--skkc-text);
    line-height: 1.5;
}
.skkc-disclosure .skkc-icon {
    flex-shrink: 0;
    color: var(--skkc-accent);
    margin-top: 2px;
}

.skkc-cards {
    list-style: none !important;
    padding: 0 !important;
    padding-left: 0 !important;
    margin: 0 !important;
    margin-left: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.skkc-empty {
    text-align: center;
    color: var(--skkc-text-soft);
    padding: 2em;
    background: var(--skkc-bg-soft);
    border-radius: var(--skkc-radius);
}

/* Stars - delade mellan alla stilar */
.skkc-stars {
    display: inline-flex;
    gap: 3px;
    line-height: 1;
}
.skkc-stars .skkc-star {
    color: #d8d2c2;
    flex-shrink: 0;
    display: inline-flex;
    line-height: 0;
}
.skkc-stars .skkc-star svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}
.skkc-stars .skkc-star.is-on {
    color: var(--skkc-accent, #c98a1a);
}
.skkc-stars .skkc-star.is-half {
    position: relative;
    color: #d8d2c2;
}
.skkc-stars .skkc-star.is-half::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23c98a1a'><path d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/></svg>");
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    clip-path: inset(0 50% 0 0);
}

/* ==========================================================================
   STIL A: EDITORIAL, mörk blå panel + redaktionellt innehåll
   ========================================================================== */

.skkc-ed {
    background: var(--skkc-bg);
    border: 1px solid var(--skkc-border);
    border-radius: var(--skkc-radius-lg);
    overflow: hidden;
    display: grid;
    grid-template-columns: 280px 1fr;
    position: relative;
    transition: box-shadow 0.2s, transform 0.2s;
}
.skkc-ed:hover {
    box-shadow: var(--skkc-shadow-hover);
    transform: translateY(-2px);
}

.skkc-ed-rank {
    position: absolute;
    top: 0;
    left: 0;
    background: var(--skkc-accent);
    color: #fff;
    padding: 7px 16px 7px 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    border-bottom-right-radius: 8px;
    z-index: 2;
    line-height: 1.2;
}

.skkc-ed-left {
    background: linear-gradient(135deg, var(--skkc-primary) 0%, var(--skkc-primary-dark) 100%);
    padding: 32px 24px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.skkc-ed-logo-box {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 18px;
    margin-bottom: 18px;
    width: 100%;
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.skkc-ed-logo-box a {
    display: block;
    width: 100%;
}
.skkc-ed-logo-box img {
    max-width: 100%;
    max-height: 70px;
    width: auto;
    height: auto;
    display: block;
    margin: 0 auto;
    object-fit: contain;
}
.skkc-ed-score-circle {
    width: 76px;
    height: 76px;
    border-radius: 50%;
    background: rgba(201, 138, 26, 0.15);
    border: 2px solid var(--skkc-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    margin-bottom: 8px;
}
.skkc-ed-score-num {
    font-size: 24px;
    font-weight: 800;
    color: var(--skkc-accent);
    line-height: 1;
}
.skkc-ed-score-max {
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 0.5px;
    margin-top: 2px;
}
.skkc-ed-score-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
}

.skkc-ed-right {
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.skkc-ed-cat {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--skkc-accent);
    margin: 0 0 4px;
}
.skkc-ed-title {
    font-family: Georgia, "Merriweather", serif;
    font-size: 1.5em;
    font-weight: 700;
    color: var(--skkc-text-strong);
    margin: 0 0 8px;
    line-height: 1.2;
}
.skkc-ed-tagline {
    font-size: 0.92em;
    color: var(--skkc-text-soft);
    margin: 0 0 18px;
    line-height: 1.5;
    font-style: italic;
}

.skkc-ed-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 0;
    border-top: 1px solid var(--skkc-border);
    border-bottom: 1px solid var(--skkc-border);
    padding: 14px 0;
    margin: 0 0 18px;
}
.skkc-ed-stat {
    padding: 0 14px;
    border-right: 1px solid var(--skkc-border);
    min-width: 0;
}
.skkc-ed-stat:first-child { padding-left: 0; }
.skkc-ed-stat:last-child { border-right: none; padding-right: 0; }
.skkc-ed-stat-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--skkc-text-soft);
    margin-bottom: 4px;
}
.skkc-ed-stat-val {
    font-size: 1em;
    font-weight: 700;
    color: var(--skkc-text-strong);
    line-height: 1.2;
}

.skkc-ed-pros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 6px 18px;
    margin: 0 0 22px;
}
.skkc-ed-pro {
    display: flex;
    gap: 8px;
    font-size: 0.9em;
    line-height: 1.5;
    color: var(--skkc-text);
    min-width: 0;
}
.skkc-ed-pro-check {
    color: var(--skkc-green);
    font-weight: 700;
    flex-shrink: 0;
}

.skkc-ed-cta-row {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: auto;
}
.skkc-ed-btn {
    background: var(--skkc-cta);
    color: #fff !important;
    padding: 14px 24px;
    border-radius: var(--skkc-radius);
    text-decoration: none !important;
    font-weight: 700;
    font-size: 0.95em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 2px solid var(--skkc-cta);
    flex: 1 1 auto;
    transition: all 0.15s;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
    text-align: center;
    line-height: 1.2;
}
.skkc-ed-btn:hover, .skkc-ed-btn:focus {
    background: var(--skkc-cta-dark);
    border-color: var(--skkc-cta-dark);
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}
.skkc-ed-btn-out {
    background: transparent;
    color: var(--skkc-primary) !important;
    border: 2px solid var(--skkc-border);
    padding: 13px 20px;
    border-radius: var(--skkc-radius);
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.9em;
    transition: all 0.15s;
    white-space: nowrap;
}
.skkc-ed-btn-out:hover {
    border-color: var(--skkc-primary);
    background: var(--skkc-bg-soft);
    text-decoration: none !important;
}

/* "Annons"-badge fungerar för alla stilar */
.skkc-ad-badge {
    display: inline-block;
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
    font-size: 0.65em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1;
}

@media (max-width: 800px) {
    .skkc-ed {
        grid-template-columns: 1fr;
    }
    .skkc-ed-left {
        padding: 24px 20px 20px;
        flex-direction: row;
        gap: 20px;
        text-align: left;
    }
    .skkc-ed-logo-box {
        margin-bottom: 0;
        flex: 1;
        min-height: 80px;
    }
    .skkc-ed-score-circle {
        margin-bottom: 0;
        flex-shrink: 0;
    }
    .skkc-ed-score-label {
        display: none;
    }
    .skkc-ed-right {
        padding: 24px 20px;
    }
}
@media (max-width: 500px) {
    .skkc-ed-left { flex-direction: column; align-items: center; text-align: center; }
    .skkc-ed-cta-row { flex-direction: column; }
    .skkc-ed-btn, .skkc-ed-btn-out { width: 100%; box-sizing: border-box; }
    .skkc-ed-stats { grid-template-columns: 1fr 1fr; }
    .skkc-ed-stat:nth-child(2n) { border-right: none; padding-right: 0; }
    .skkc-ed-stat:nth-child(2n+1) { padding-left: 0; }
}

/* ==========================================================================
   STIL B: MAGAZINE — visuell kortmockup + stora typografiska siffror
   ========================================================================== */

.skkc-mag {
    background: var(--skkc-bg);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--skkc-border);
    display: grid;
    grid-template-columns: 1fr 280px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.skkc-mag:hover {
    box-shadow: var(--skkc-shadow-hover);
    transform: translateY(-2px);
}

.skkc-mag-main {
    padding: 32px;
    position: relative;
    min-width: 0;
}
.skkc-mag-rank {
    display: inline-block;
    background: var(--skkc-primary-dark);
    color: var(--skkc-accent);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 100px;
    margin: 0 0 14px;
    border: 1px solid var(--skkc-accent);
    line-height: 1.2;
}
.skkc-mag-title {
    font-family: Georgia, "Merriweather", serif;
    font-size: 1.85em;
    font-weight: 700;
    color: var(--skkc-text-strong);
    margin: 0 0 8px;
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.skkc-mag-tagline {
    font-size: 0.95em;
    color: var(--skkc-text-soft);
    margin: 0 0 24px;
    line-height: 1.5;
    max-width: 480px;
}

.skkc-mag-stats {
    display: flex;
    gap: 32px;
    margin: 0 0 24px;
    flex-wrap: wrap;
}
.skkc-mag-stat-item {
    flex: 0 0 auto;
    min-width: 0;
}
.skkc-mag-stat-val {
    font-family: Georgia, "Merriweather", serif;
    font-size: 1.85em;
    font-weight: 700;
    color: var(--skkc-text-strong);
    line-height: 1;
}
.skkc-mag-stat-unit {
    font-size: 0.85em;
    color: var(--skkc-text-soft);
    font-weight: 400;
    font-family: inherit;
}
.skkc-mag-stat-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--skkc-text-soft);
    margin-top: 6px;
}

.skkc-mag-pros-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--skkc-accent);
    margin: 0 0 10px;
}
.skkc-mag-pros {
    list-style: none;
    padding: 0;
    margin: 0;
}
.skkc-mag-pros li {
    padding: 9px 0 9px 28px;
    position: relative;
    font-size: 0.92em;
    line-height: 1.5;
    color: var(--skkc-text);
    border-bottom: 1px dashed var(--skkc-border);
}
.skkc-mag-pros li:last-child {
    border-bottom: none;
}
.skkc-mag-pros li:before {
    content: "→";
    position: absolute;
    left: 4px;
    top: 9px;
    color: var(--skkc-accent);
    font-weight: 700;
}

.skkc-mag-side {
    background: linear-gradient(180deg, var(--skkc-primary) 0%, var(--skkc-primary-dark) 100%);
    color: #fff;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 0;
}

/* Logotyp-platta (lån) - ren brand-ruta, ej kortmockup */
.skkc-mag-logo {
    width: 100%;
    background: #fff;
    border-radius: var(--skkc-radius-lg);
    padding: 26px 22px;
    margin-bottom: 22px;
    min-height: 104px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.18);
    box-sizing: border-box;
}
.skkc-mag-logo img {
    max-width: 100%;
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0;
    display: block;
}
.skkc-mag-logo-text {
    color: var(--skkc-primary);
    font-weight: 800;
    font-size: 1.35em;
    letter-spacing: -0.5px;
    line-height: 1.15;
    text-align: center;
}

.skkc-mag-card-visual {
    width: 100%;
    aspect-ratio: 1.586;
    border-radius: 10px;
    padding: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-bottom: 20px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
    position: relative;
    overflow: hidden;
    color: #fff;
}
.skkc-mag-card-visual::before {
    content: "";
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
    pointer-events: none;
}
.skkc-mag-card-img {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 14px;
}
.skkc-mag-card-img img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0;
}
.skkc-mag-card-brand {
    color: #fff;
    font-weight: 800;
    font-size: 1.15em;
    letter-spacing: -0.5px;
    position: relative;
    z-index: 1;
}
.skkc-mag-card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: end;
    position: relative;
    z-index: 1;
}
.skkc-mag-card-num {
    color: rgba(255, 255, 255, 0.85);
    font-family: monospace;
    font-size: 11px;
    letter-spacing: 1px;
}
.skkc-mag-card-mc {
    display: flex;
}
.skkc-mag-card-mc div {
    width: 20px;
    height: 20px;
    border-radius: 50%;
}
.skkc-mag-card-mc .r { background: #eb001b; }
.skkc-mag-card-mc .y { background: #f79e1b; margin-left: -8px; opacity: 0.92; }

.skkc-mag-score {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 16px;
    gap: 4px;
}
.skkc-mag-score .skkc-stars { gap: 2px; }
.skkc-mag-score .skkc-stars .skkc-star svg { width: 18px; height: 18px; }
.skkc-mag-score-num {
    font-family: Georgia, "Merriweather", serif;
    font-size: 2em;
    font-weight: 700;
    color: #fff;
    line-height: 1;
    margin-top: 4px;
}
.skkc-mag-score-out {
    font-size: 0.75em;
    color: rgba(255, 255, 255, 0.6);
}

.skkc-mag-btn {
    background: var(--skkc-cta) !important;
    color: #fff !important;
    padding: 14px 24px;
    border-radius: var(--skkc-radius);
    text-decoration: none !important;
    font-weight: 700;
    font-size: 0.95em;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    border: 2px solid var(--skkc-cta);
    transition: all 0.15s;
    line-height: 1.2;
}
.skkc-mag-btn:hover {
    background: var(--skkc-cta-dark) !important;
    border-color: var(--skkc-cta-dark) !important;
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}
.skkc-mag-readmore {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.82em;
    text-decoration: none !important;
    margin-top: 12px;
    display: inline-block;
}
.skkc-mag-readmore:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

@media (max-width: 800px) {
    .skkc-mag {
        grid-template-columns: 1fr;
    }
    .skkc-mag-side {
        order: -1;
        padding: 24px 20px;
    }
    .skkc-mag-card-visual,
    .skkc-mag-logo {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
    .skkc-mag-main {
        padding: 24px 20px;
    }
}
@media (max-width: 500px) {
    .skkc-mag-title { font-size: 1.5em; }
    .skkc-mag-stats { gap: 20px; }
    .skkc-mag-stat-val { font-size: 1.5em; }
}

/* ==========================================================================
   STIL C: COMPACT — rankningsbar + tät listvy
   ========================================================================== */

.skkc-cmp {
    background: var(--skkc-bg);
    border: 1px solid var(--skkc-border);
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 60px 240px 1fr 200px;
    align-items: stretch;
    transition: box-shadow 0.15s, border-color 0.15s;
}
.skkc-cmp:hover {
    border-color: var(--skkc-accent);
    box-shadow: var(--skkc-shadow);
}

.skkc-cmp-rank-bar {
    background: var(--skkc-primary);
    color: var(--skkc-accent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 0;
}
.skkc-cmp-rank-num {
    font-family: Georgia, "Merriweather", serif;
    font-size: 1.9em;
    font-weight: 700;
    line-height: 1;
}
.skkc-cmp-rank-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 2px;
    line-height: 1;
}

.skkc-cmp-info {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-right: 1px solid var(--skkc-border);
    min-width: 0;
}
.skkc-cmp-issuer {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--skkc-text-soft);
    margin-bottom: 4px;
}
.skkc-cmp-title {
    font-family: Georgia, "Merriweather", serif;
    font-size: 1.05em;
    font-weight: 700;
    color: var(--skkc-text-strong);
    margin: 0 0 8px;
    line-height: 1.2;
}
.skkc-cmp-title a {
    color: inherit !important;
    text-decoration: none !important;
}
.skkc-cmp-title a:hover {
    color: var(--skkc-accent-dark) !important;
}

.skkc-cmp-score-line {
    display: flex;
    align-items: center;
    gap: 6px;
}
.skkc-cmp-score-bar {
    width: 60px;
    height: 6px;
    background: var(--skkc-border);
    border-radius: 3px;
    overflow: hidden;
    flex-shrink: 0;
}
.skkc-cmp-score-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--skkc-accent) 0%, #d9a02a 100%);
    border-radius: 3px;
}
.skkc-cmp-score-text {
    font-size: 0.78em;
    font-weight: 700;
    color: var(--skkc-text-strong);
}
.skkc-cmp-score-out {
    font-size: 0.72em;
    color: var(--skkc-text-soft);
}

.skkc-cmp-stats {
    padding: 18px 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 14px 24px;
    border-right: 1px solid var(--skkc-border);
    align-items: center;
    min-width: 0;
}
.skkc-cmp-stat-label {
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--skkc-text-soft);
    margin-bottom: 2px;
}
.skkc-cmp-stat-val {
    font-size: 0.95em;
    font-weight: 700;
    color: var(--skkc-text-strong);
    line-height: 1.2;
}
.skkc-cmp-stat-green {
    color: var(--skkc-green);
}
.skkc-cmp-stat-amber {
    color: var(--skkc-accent);
}

.skkc-cmp-cta-col {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-width: 0;
}
.skkc-cmp-btn {
    background: var(--skkc-cta);
    color: #fff !important;
    padding: 11px 14px;
    border-radius: 6px;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 0.85em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 2px solid var(--skkc-cta);
    transition: all 0.15s;
    text-align: center;
    line-height: 1.2;
}
.skkc-cmp-btn:hover {
    background: var(--skkc-cta-dark) !important;
    border-color: var(--skkc-cta-dark) !important;
    color: #fff !important;
    text-decoration: none !important;
}
.skkc-cmp-btn .skkc-ad-badge {
    font-size: 0.62em;
    padding: 1px 4px;
}
.skkc-cmp-readmore {
    font-size: 0.78em;
    color: var(--skkc-text-soft) !important;
    text-decoration: none !important;
    text-align: center;
}
.skkc-cmp-readmore:hover {
    color: var(--skkc-primary) !important;
    text-decoration: underline !important;
}

@media (max-width: 900px) {
    .skkc-cmp {
        grid-template-columns: 50px 1fr;
        grid-template-areas:
            "rank info"
            "rank stats"
            "cta cta";
    }
    .skkc-cmp-rank-bar { grid-area: rank; }
    .skkc-cmp-info { grid-area: info; border-right: none; border-bottom: 1px solid var(--skkc-border); }
    .skkc-cmp-stats { grid-area: stats; border-right: none; }
    .skkc-cmp-cta-col {
        grid-area: cta;
        flex-direction: row;
        gap: 12px;
        padding: 14px 20px;
        border-top: 1px solid var(--skkc-border);
        background: var(--skkc-bg-soft);
    }
    .skkc-cmp-btn { flex: 1; }
}
@media (max-width: 500px) {
    .skkc-cmp { grid-template-columns: 44px 1fr; }
    .skkc-cmp-stats { grid-template-columns: 1fr 1fr; }
    .skkc-cmp-cta-col { flex-direction: column; }
}

/* ==========================================================================
   Single-sida (orörd från tidigare)
   ========================================================================== */

.skkc-single-main {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px;
}
.skkc-single-header {
    text-align: center;
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--skk-border, #e7e3d6);
}
.skkc-single-title {
    margin: 0 0 16px;
    font-size: 2em;
    font-weight: 700;
    color: var(--skk-text-strong, #0f1723);
}
.skkc-single-logo { margin: 0 auto 16px; max-width: 400px; }
.skkc-single-logo img { max-width: 100%; height: auto; display: block; margin: 0 auto; }
.skkc-single-rating { display: flex; justify-content: center; margin-bottom: 16px; }
.skkc-single-cta { margin-top: 16px; }
.skkc-single-hero {
    margin: 0 0 28px;
    border-radius: 12px;
    overflow: hidden;
    line-height: 0;
}
.skkc-single-hero-img {
    width: 100%;
    height: clamp(180px, 32vw, 360px);
    object-fit: cover;
    display: block;
}

/* [cc-stats] */
.skkc-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin: 24px 0;
}
.skkc-stat {
    background: var(--skk-bg-warm, #ebf0f7);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
}
.skkc-stat-label { display: block; font-size: 0.85em; color: var(--skk-text-soft, #5b6675); margin-bottom: 4px; }
.skkc-stat-value { display: block; font-size: 1.25em; font-weight: 700; color: var(--skk-text-strong, #0f1723); }

/* [cc-info] */
.skkc-info-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin: 32px 0;
}
.skkc-info-col h2 { margin: 0 0 12px; font-size: 1.3em; color: var(--skk-text-strong, #0f1723); }
.skkc-fordelar { list-style: none; padding: 0; margin: 0; }
.skkc-fordelar li {
    position: relative; padding-left: 26px; margin-bottom: 8px; line-height: 1.5;
}
.skkc-fordelar li:before {
    content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px;
    background: var(--skk-green, #5a7d3a); border-radius: 50%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="M6.5 11L3 7.5l1-1L6.5 9l5.5-5.5 1 1z" fill="white"/></svg>');
    background-position: center; background-repeat: no-repeat; background-size: 14px;
}

.skkc-related { margin-top: 48px; }
.skkc-related h2 { margin: 0 0 20px; }

/* ===== RELATED CARDS GRID (för "Liknande långivare" på single-sida) ===== */
.skkc-cards-related {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}
.skkc-related-card {
    list-style: none;
    background: var(--skkc-bg, #ffffff);
    border: 1px solid var(--skkc-border, #e7e3d6);
    border-radius: var(--skkc-radius-lg, 12px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--skkc-shadow);
    transition: transform 0.15s, box-shadow 0.15s;
}
.skkc-related-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--skkc-shadow-hover);
}
.skkc-related-card-img {
    display: block;
    background: var(--skkc-bg-warm, #ebf0f7);
    padding: 18px;
    aspect-ratio: 16 / 10;
    text-align: center;
}
.skkc-related-card-img img {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    width: auto;
    object-fit: contain;
    margin: 0 auto;
    display: block;
    border-radius: 6px;
}
.skkc-related-card-body {
    padding: 14px 16px 8px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}
.skkc-related-card-title {
    margin: 0 0 6px !important;
    font-size: 1em !important;
    font-weight: 700;
    line-height: 1.3;
    padding: 0 !important;
    border: none !important;
}
.skkc-related-card-title a {
    color: var(--skkc-text-strong, #0f1723);
    text-decoration: none;
}
.skkc-related-card-title a:hover {
    color: var(--skkc-cta, #28528d);
}
.skkc-related-card-rating {
    margin: 0 0 10px;
    font-size: 0.92em;
}
.skkc-related-card-stats {
    margin: 0 !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px 12px;
    font-size: 0.9em;
}
.skkc-related-card-stats > div {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    border-bottom: 1px dashed var(--skkc-border, #e7e3d6);
    padding-bottom: 4px;
}
.skkc-related-card-stats > div:last-child {
    border-bottom: none;
}
.skkc-related-card-stats dt {
    color: var(--skkc-text-soft, #5b6675);
    font-weight: 500;
    margin: 0;
    padding: 0;
}
.skkc-related-card-stats dd {
    color: var(--skkc-text-strong, #0f1723);
    font-weight: 700;
    margin: 0;
    padding: 0;
    text-align: right;
}
.skkc-related-card-cta {
    padding: 12px 16px 16px;
}
.skkc-related-card-cta .skkc-btn,
.skkc-related-card-cta .skkc-cta-inactive {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}
.skkc-btn-sm {
    padding: 10px 16px;
    font-size: 0.92em;
}

/* Inaktivt företag - disabled CTA */
.skkc-cta-inactive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--skkc-bg-soft, #f8f7f1) !important;
    color: var(--skkc-text-soft, #5b6675) !important;
    padding: 13px 22px;
    border-radius: 8px;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 0.98em;
    border: 2px dashed var(--skkc-border, #e7e3d6);
    line-height: 1.2;
    cursor: not-allowed;
    position: relative;
}
.skkc-cta-inactive:before {
    content: "✕";
    font-size: 0.9em;
    color: var(--skkc-text-soft, #5b6675);
    opacity: 0.6;
}
.skkc-related-card-inactive {
    opacity: 0.7;
}
.skkc-related-card-inactive .skkc-related-card-img {
    filter: grayscale(0.5);
}

@media (max-width: 900px) {
    .skkc-cards-related {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 600px) {
    .skkc-cards-related {
        grid-template-columns: 1fr;
    }
}

/* CTA-knappens .skkc-btn för single-sidan (gammal klass) */
.skkc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    background: var(--skkc-cta, #28528d); color: #fff !important;
    padding: 13px 22px; border-radius: var(--skkc-radius, 10px); text-decoration: none !important;
    font-weight: 700; font-size: 0.98em;
    border: 2px solid var(--skkc-cta, #28528d); transition: all 0.15s;
    line-height: 1.2;
}
.skkc-btn:hover { background: var(--skkc-cta-dark, #193357); border-color: var(--skkc-cta-dark, #193357); transform: translateY(-1px); }
.skkc-btn-lg { padding: 15px 28px; font-size: 1.05em; }

@media (max-width: 600px) {
    .skkc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .skkc-info-wrapper { grid-template-columns: 1fr; gap: 24px; }
    .skkc-single-title { font-size: 1.5em; }
}


/* ==========================================================================
   LANBYTE LOAN ROWS
   Loan-native, horisontell jämförelse i märkesblått.
   Modellerad på Lendo/Sambla/Advisa/Compari: rank, logo, betyg,
   kolumner (lånebelopp/ränta/löptid/ålder), USP-taggar, blå CTA,
   hopfällbart representativt exempel. Ingen kortmockup.
   ========================================================================== */

.llc-row {
    --llc-brand: var(--skkc-cta, #28528d);
    --llc-brand-dark: var(--skkc-cta-dark, #193357);
    --llc-brand-bg: var(--lab-brand-soft, #ebf0f7);
    --llc-amber: var(--skkc-accent, #c98a1a);
    --llc-ok: var(--lab-ok, #5a7d3a);
    --llc-ok-bg: var(--lab-ok-bg, #f1f5ea);
    --llc-text: var(--lab-text, #1a2230);
    --llc-soft: var(--lab-muted, #5b6675);
    --llc-strong: #0f1723;
    --llc-border: var(--lab-border, #e7e3d6);
    --llc-line: #efece2;
    position: relative;
    list-style: none !important;
    background: var(--lab-surface, #fff);
    border: 1px solid var(--llc-border);
    border-radius: var(--lab-radius, 12px);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
    padding: 0 !important;
    margin: 0 !important;
}
.llc-row::before { display: none !important; content: none !important; }
.llc-row:hover {
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
    transform: translateY(-2px);
    border-color: #d8d2c2;
}

/* Rank-ribbon uppe till vänster */
.llc-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--llc-brand);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 7px 14px;
    border-bottom-right-radius: 12px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    line-height: 1;
}

/* Delade celler */
.llc-logo { display: flex; align-items: center; justify-content: center; width: 100%; }
.llc-logo img { max-width: 100%; max-height: 54px; width: auto; height: auto; object-fit: contain; display: block; margin: 0 auto; border-radius: 0 !important; box-shadow: none !important; }
.llc-rating { display: flex; align-items: center; gap: 5px; }
.llc-rating .skkc-stars { gap: 2px; }
.llc-rating-num { font-weight: 800; color: var(--llc-strong); font-size: 0.92em; }
.llc-rating-out { color: var(--llc-soft); font-size: 0.78em; }

/* Logotyp istället för namn i compact-listan (shortcode-attribut logo="1") */
.llc-cmp-logo, .skkc-cmp-logo {
    display: inline-flex;
    align-items: center;
    margin: 2px 0 4px;
}
.llc-cmp-logo img, .skkc-cmp-logo img {
    max-height: 48px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
}

/* Kreditkort compact: dubbelt så bred bild + namnfält ovanför statistik */
.llc-row-cc { grid-template-columns: 54px 210px minmax(0, 1fr) 184px; align-items: start; }
.llc-row-cc .llc-cmp-cta { align-self: center; }
.llc-row-cc .llc-cmp-logo img { max-height: 96px; max-width: 170px; }
.llc-cc-body {
    padding: 14px 18px;
    border-right: 1px solid var(--llc-line);
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 0;
    justify-content: flex-start;
}
.llc-cc-body .llc-cmp-stats { padding: 0; border: 0; }
/* Högre specificitet + !important för att neutralisera temats h3-stil (kantlinje, padding, marginal) oavsett selektor */
.skkc-listing .llc-cc-name {
    margin: 0 !important;
    border: 0 !important;
    border-left: 0 !important;
    padding: 0 !important;
    font-size: 1.4em;
    font-weight: 700;
    line-height: 1.2;
}
.skkc-listing .llc-cc-name a { color: var(--llc-strong); text-decoration: none; }
.skkc-listing .llc-cc-name a:hover { color: var(--llc-brand); }

.llc-cat { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--llc-brand-dark); margin: 0 0 3px; }
.llc-name { font-family: inherit; font-size: 1.15em; font-weight: 800; color: var(--llc-strong); margin: 0; line-height: 1.2; padding: 0 !important; border: none !important; }
.llc-name a { color: inherit !important; text-decoration: none !important; }
.llc-name a:hover { color: var(--llc-brand-dark) !important; }
.llc-tagline { color: var(--llc-soft); font-size: 0.9em; line-height: 1.5; margin: 6px 0 0; }

.llc-stats { display: grid; gap: 4px 22px; }
.llc-stat-label { font-size: 10px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: var(--llc-soft); margin: 0 0 2px; }
.llc-stat-val { font-size: 0.98em; font-weight: 800; color: var(--llc-strong); line-height: 1.2; }
.llc-stat-val.is-rate { color: var(--llc-brand-dark); }
.llc-stat-val.is-eff { color: var(--skkc-primary, #193357); }

/* Metodnot under listan: hur den effektiva räntan är framräknad. Diskret,
   men läsbar. Ligger mellan listan och den röda lagvarningen. */
.skkc-eff-note {
    margin: 10px 0 0;
    padding: 12px 16px;
    border-left: 3px solid var(--skkc-border, #e7e3d6);
    background: var(--skkc-bg-soft, #f8f7f1);
    border-radius: 0 6px 6px 0;
}
.skkc-eff-note p {
    margin: 0 0 6px;
    font-size: 0.82em;
    line-height: 1.55;
    color: var(--skkc-text-soft, #5b6675);
}
.skkc-eff-note p:last-child { margin-bottom: 0; }
.skkc-eff-note strong { color: var(--skkc-text-strong, #1a2230); }

.llc-pros { display: flex; flex-wrap: wrap; gap: 7px 18px; margin: 16px 0 0; padding: 0 !important; list-style: none !important; }
.llc-pros li { display: flex; align-items: center; gap: 8px; font-size: 0.88em; color: var(--llc-text); padding: 0 !important; margin: 0 !important; line-height: 1.4; }
.llc-pros li::before {
    content: "";
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--llc-ok-bg, #f1f5ea) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.5 11L3 7.5l1-1L6.5 9l5.5-5.5 1 1z' fill='%235a7d3a'/></svg>") center/12px no-repeat;
    position: static !important;
}

/* Hopfällbart: villkor + representativt exempel */
.llc-terms { margin: 14px 0 0; border-top: 1px solid var(--llc-line); padding-top: 10px; }
.llc-terms summary { cursor: pointer; font-size: 0.82em; font-weight: 700; color: var(--llc-brand-dark); list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.llc-terms summary::-webkit-details-marker { display: none; }
.llc-terms summary::after { content: "▾"; font-size: 0.9em; transition: transform 0.15s; }
.llc-terms[open] summary::after { transform: rotate(180deg); }
.llc-terms-ex { margin: 10px 0 6px; font-size: 0.82em; color: var(--llc-text); line-height: 1.5; }
.llc-terms-disc { margin: 0; font-size: 0.78em; color: var(--llc-soft); line-height: 1.5; }

/* CTA */
.llc-cta { display: flex; flex-direction: column; align-items: stretch; gap: 8px; }
.llc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--llc-brand);
    color: #fff !important;
    border: 2px solid var(--llc-brand);
    font-weight: 800;
    font-size: 0.98em;
    padding: 13px 20px;
    border-radius: 10px;
    text-decoration: none !important;
    line-height: 1.2;
    text-align: center;
    box-sizing: border-box;
    transition: all 0.15s;
}
.llc-btn:hover, .llc-btn:focus { background: var(--llc-brand-dark); border-color: var(--llc-brand-dark); color: #fff !important; transform: translateY(-1px); text-decoration: none !important; }
.llc-btn-sm { padding: 11px 14px; font-size: 0.9em; }
.llc-btn-lg { padding: 15px 24px; font-size: 1.05em; }
.llc-btn .skkc-ad-badge { background: rgba(255, 255, 255, 0.25); }
.llc-readmore { font-size: 0.85em; color: var(--llc-soft) !important; text-decoration: none !important; text-align: center; }
.llc-readmore:hover { color: var(--llc-brand-dark) !important; text-decoration: underline !important; }

/* ---------- EDITORIAL (standard) ---------- */
.llc-row-editorial { display: grid; grid-template-columns: 212px minmax(0, 1fr) 212px; align-items: stretch; }
.llc-ed-brand { padding: 26px 20px; border-right: 1px solid var(--llc-line); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: #faf9f5; text-align: center; }
.llc-ed-brand .llc-logo { min-height: 54px; }
.llc-ed-main { padding: 24px 26px; display: flex; flex-direction: column; min-width: 0; }
.llc-ed-statgrid { grid-template-columns: repeat(auto-fit, minmax(116px, 1fr)); border-top: 1px solid var(--llc-line); border-bottom: 1px solid var(--llc-line); padding: 14px 0; margin: 14px 0 0; gap: 14px 22px; }
.llc-ed-cta { padding: 24px 20px; border-left: 1px solid var(--llc-line); display: flex; flex-direction: column; justify-content: center; gap: 8px; background: #faf9f5; }

/* ---------- COMPACT (tät, rankad) ---------- */
.llc-row-compact { display: grid; grid-template-columns: 54px 196px minmax(0, 1fr) 184px; align-items: center; }
.llc-cmp-rank { align-self: stretch; background: var(--llc-brand); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.llc-cmp-rank .n { font-size: 1.7em; font-weight: 800; line-height: 1; }
.llc-cmp-rank .t { font-size: 9px; text-transform: uppercase; letter-spacing: 1px; opacity: 0.9; }
.llc-cmp-brand { padding: 14px 18px; border-right: 1px solid var(--llc-line); display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.llc-cmp-brand .llc-name { font-size: 1.02em; }
.llc-cmp-badge { display: inline-flex; align-self: flex-start; background: var(--llc-brand); color: #fff; font-size: 10px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 4px 9px; border-radius: 4px; line-height: 1.2; max-width: 100%; }
.llc-cmp-stats { padding: 14px 18px; grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 10px 20px; border-right: 1px solid var(--llc-line); }
.llc-cmp-cta { padding: 14px 18px; }

/* ---------- MAGAZINE (hero / topp-val) ---------- */
.llc-row-magazine { border: 2px solid var(--llc-brand); border-radius: var(--lab-radius, 12px); box-shadow: 0 6px 22px rgba(40, 82, 141, 0.12); }
.llc-mag-ribbon { background: var(--llc-brand); color: #fff; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; font-size: 12px; padding: 9px 22px; display: flex; align-items: center; gap: 8px; line-height: 1; }
.llc-mag-body { display: grid; grid-template-columns: 232px minmax(0, 1fr) 224px; align-items: center; }
.llc-mag-brand { padding: 24px 22px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; border-right: 1px solid var(--llc-line); }
.llc-mag-brand .llc-logo { min-height: 60px; }
.llc-mag-brand .llc-logo img { max-height: 64px; }
.llc-mag-hero { padding: 22px 26px; min-width: 0; }
.llc-mag-hero .llc-name { font-size: 1.4em; }
.llc-mag-figures { display: flex; align-items: flex-end; gap: 28px; flex-wrap: wrap; margin: 14px 0 0; }
.llc-mag-rate { font-size: 2.3em; font-weight: 800; color: var(--llc-brand-dark); line-height: 0.95; }
.llc-mag-rate small { display: block; font-size: 0.28em; font-weight: 700; color: var(--llc-soft); text-transform: uppercase; letter-spacing: 0.6px; margin-bottom: 6px; }
.llc-mag-substats { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 12px 22px; flex: 1 1 auto; }
.llc-mag-cta { padding: 24px 22px; border-left: 1px solid var(--llc-line); display: flex; flex-direction: column; justify-content: center; gap: 10px; }

/* ---------- DISCLOSURE -> märkesaccent ---------- */
.skkc-listing .skkc-disclosure { border-left-color: var(--skkc-cta) !important; }
.skkc-listing .skkc-disclosure .skkc-icon { color: var(--skkc-cta) !important; }

/* ---------- RESPONSIVT ---------- */
@media (max-width: 860px) {
    .llc-row-editorial,
    .llc-mag-body { grid-template-columns: 1fr; }
    .llc-ed-brand,
    .llc-mag-brand {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-start;
        column-gap: 18px;
        row-gap: 10px;
        border-right: none;
        border-bottom: 1px solid var(--llc-line);
        text-align: left;
    }
    .llc-ed-brand .llc-logo,
    .llc-mag-brand .llc-logo { width: auto; max-width: 150px; flex-shrink: 0; }
    /* Betyget får aldrig krympas ihop av logotypen. Ryms det inte bredvid
       hoppar det ned på egen rad i stället för att klippas av .llc-row
       (som har overflow: hidden). */
    .llc-ed-brand .llc-rating,
    .llc-mag-brand .llc-rating { flex: 0 1 auto; max-width: 100%; white-space: nowrap; }
    .llc-ed-cta,
    .llc-mag-cta { border-left: none; border-top: 1px solid var(--llc-line); }
    .llc-mag-figures { gap: 20px; }
}
@media (max-width: 760px) {
    .llc-row-compact { grid-template-columns: 48px 1fr; }
    .llc-row-cc { grid-template-columns: 48px 1fr; }
    .llc-cmp-rank { grid-row: 1 / 4; }
    .llc-cmp-brand { border-right: none; }
    .llc-cmp-stats { border-right: none; border-top: 1px solid var(--llc-line); }
    .llc-cc-body { border-right: none; border-top: 1px solid var(--llc-line); }
    .llc-cmp-cta { border-top: 1px solid var(--llc-line); flex-direction: row; align-items: center; }
    .llc-cmp-cta .llc-btn { flex: 1 1 auto; }
    .llc-cmp-cta .llc-readmore { flex: 0 0 auto; white-space: nowrap; }
}
@media (max-width: 520px) {
    .llc-ed-statgrid,
    .llc-cmp-stats,
    .llc-mag-substats { grid-template-columns: 1fr 1fr; }
    .llc-mag-rate { font-size: 2em; }
    .llc-cmp-cta { flex-direction: column; }
    .llc-badge { font-size: 10px; padding: 6px 12px; }
    /* Mindre logotyp och något mindre stjärnor gör att logotyp och betyg
       oftast ryms på samma rad även på en smal telefon. */
    .llc-ed-brand .llc-logo,
    .llc-mag-brand .llc-logo { max-width: 120px; }
    .llc-ed-brand,
    .llc-mag-brand { column-gap: 14px; }
    .llc-rating { gap: 4px; }
    .llc-rating .skkc-stars { gap: 1px; }
    .llc-rating .skkc-stars .skkc-star svg { width: 14px; height: 14px; }
}

/* ==========================================================================
   v3.6.0 - Inaktiva företag: informationsruta (single) + länklista (shortcode)
   ========================================================================== */

/* Informationsruta på enskild sida för inaktivt företag (ersätter CTA) */
.skkc-inactive-box {
    text-align: left;
    background: var(--skk-amber-light, #f9f2e0);
    border: 1px solid #ecd9a8;
    border-left: 4px solid var(--skk-accent, #c98a1a);
    border-radius: var(--skk-radius-lg, 12px);
    padding: 18px 20px;
    margin: 0 auto;
    max-width: 560px;
}
.skkc-inactive-box-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: var(--skk-amber, #8a5a10);
    font-size: 1.05rem;
    line-height: 1.35;
}
.skkc-inactive-box-head strong { color: var(--skk-text-strong, #0f1723); }
.skkc-inactive-ico { flex: 0 0 auto; margin-top: 1px; }
.skkc-inactive-box-text {
    margin: 10px 0 14px;
    color: var(--skk-text-soft, #5b6675);
    font-size: .95rem;
    line-height: 1.5;
}
.skkc-inactive-box-label {
    display: block;
    font-weight: 600;
    font-size: .9rem;
    color: var(--skk-text, #1a2230);
    margin-bottom: 8px;
}
.skkc-inactive-box-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.skkc-inactive-cta { text-decoration: none; }
.skkc-inactive-cta span { margin-left: 4px; }
.skkc-inactive-box-fallback { margin: 4px 0 0; }
.skkc-inactive-box-fallback a {
    color: var(--skk-green, #28528d);
    font-weight: 600;
    text-decoration: none;
}
.skkc-inactive-box-fallback a:hover { text-decoration: underline; }

/* [inactive-companies] - länklista över avvecklade/pausade företag */
.skkc-inactive-list {
    margin: 28px 0;
    padding: 18px 20px;
    background: var(--skk-bg-soft, #f8f7f1);
    border: 1px solid var(--skk-border, #e7e3d6);
    border-radius: var(--skk-radius-lg, 12px);
}
.skkc-inactive-list-heading {
    margin: 0 0 6px;
    font-size: 1.15rem;
    color: var(--skk-text-strong, #0f1723);
}
.skkc-inactive-list-intro {
    margin: 0 0 14px;
    color: var(--skk-text-soft, #5b6675);
    font-size: .92rem;
    line-height: 1.5;
}
.skkc-inactive-list-items {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 8px 20px;
}
.skkc-inactive-cols-2 .skkc-inactive-list-items { grid-template-columns: repeat(2, 1fr); }
.skkc-inactive-cols-3 .skkc-inactive-list-items { grid-template-columns: repeat(3, 1fr); }
.skkc-inactive-list-items li {
    margin: 0;
    padding: 7px 0;
    border-bottom: 1px solid var(--skk-border, #e7e3d6);
}
.skkc-inactive-list-items a {
    color: var(--skk-primary, #193357);
    font-weight: 600;
    text-decoration: none;
}
.skkc-inactive-list-items a:hover { color: var(--skk-green, #28528d); text-decoration: underline; }

@media (max-width: 600px) {
    .skkc-inactive-cols-2 .skkc-inactive-list-items,
    .skkc-inactive-cols-3 .skkc-inactive-list-items { grid-template-columns: 1fr; }
    .skkc-inactive-box-btns { flex-direction: column; }
    .skkc-inactive-cta { width: 100%; text-align: center; }
}

/* ========================================================================
   BREDD-FIX (v3.11.2)
   Tving listans wrapper, ul och li att börja vid container-kanten —
   vissa teman ger ul/li en standardindrag (~26px) via .entry-content som
   annars slår igenom plugin-CSS:en.
   ======================================================================== */
.skkc-listing,
.skkc-listing > ul,
.skkc-listing > ul > li {
    margin-left: 0 !important;
    padding-left: 0 !important;
}
.skkc-listing > ul > li {
    list-style: none !important;
}

/* ==========================================================================
   KOMPATIBILITET MED LANBYTE.SE GLOBALA CSS (v1.0.0)

   Sajtens globala CSS formaterar allt som ligger inuti .entry-content, och
   pluginens shortcodes hamnar just där. Två mekanismer används för att hålla
   isär sajtens artikelstilar och pluginens komponenter.

   1) Wrapper-klassen "lab-komponent" på pluginens ytterelement. Sajtens egna
      regler för ul, ol, li, h2, h3 och h4 slutar med :not([class*="lab-"] *),
      alltså "gäller inte om en förälder har en lab-klass". Markören räcker
      därför för listindrag, punktmarkörer och rubrikmarginaler.

   2) Reglerna nedan för det som saknar den undantagsregeln: rubriknumreringen,
      länkfärgen, bildhörnen och definitionslistorna.

   Om specificiteten: sajtens a-regel väger sex klasser (:is-blocket, två
   [class] och tre :not med klassargument). Selektorerna nedan lägger därför på
   [class][class][class] för att hamna på sju och vinna utan !important.
   ========================================================================== */

/* ---------- 1. Typografi ----------
   Enskilda företagssidor renderas av pluginens egen mall, alltså utanför
   .entry-content, dit sajtens typsnittsregler inte når. Här sätts de i
   stället explicit så att listor och företagssidor ser likadana ut. */
.skkc-listing,
.skkc-single,
.skkc-related,
.skkc-info-wrapper,
.skkc-inactive-list,
.skkc-inactive-box {
    font-family: var(--skkc-body-font, inherit);
}
.skkc-single-title,
.skkc-related > h2,
.skkc-info-col h2,
.skkc-inactive-list-heading,
.llc-name,
.llc-cc-name,
.skkc-card-title,
.skkc-ed-title,
.skkc-mag-title,
.skkc-related-card-title {
    font-family: var(--skkc-head-font, inherit);
}
/* Siffror och nyckeltal ska följa rubriktypsnittet, annars bryter de mot
   sajtens uttryck när brödtexten är en antikva. */
.llc-stat-val,
.llc-mag-rate,
.llc-rating-num,
.llc-cmp-rank .n,
.skkc-mag-stat-val {
    font-family: var(--skkc-head-font, inherit);
}

/* ---------- 2. Rubriknumrering ----------
   Sajten numrerar varje h2 i artikeln via counter(fh2). Den regeln har ingen
   undantagsklausul, så pluginens rubriker skulle både få ett eget nummer och
   förskjuta artikelns numrering. Båda delarna stoppas här. */
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .lab-komponent :is(h2,h3,h4) {
    counter-increment: none;
}
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .lab-komponent :is(h2,h3,h4)::before {
    content: none;
}

/* ---------- 3. Länkar ----------
   Sajtens a-regel ger märkesblå färg och understrykning. Knapparna klarar sig
   på egen hand (de har !important sedan tidigare), men rubriklänkar, logotyper
   och listlänkar behöver återställas. */
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .lab-komponent[class][class][class] :is(.llc-name,.llc-cc-name,.skkc-card-title,.skkc-ed-title,.skkc-mag-title,.skkc-related-card-title) a,
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .lab-komponent[class][class][class] :is(.llc-logo,.llc-cmp-logo,.skkc-cmp-logo,.skkc-related-card-img) {
    text-decoration: none;
    color: var(--llc-strong, #0f1723);
}
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .lab-komponent[class][class][class] :is(.llc-name,.llc-cc-name,.skkc-related-card-title) a:hover {
    color: var(--skkc-cta, #28528d);
    text-decoration: none;
}
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .lab-komponent[class][class][class] .skkc-inactive-list-items a,
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .lab-komponent[class][class][class] .skkc-inactive-box-fallback a {
    color: var(--skkc-primary, #193357);
    text-decoration: none;
}
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .lab-komponent[class][class][class] .skkc-inactive-list-items a:hover,
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .lab-komponent[class][class][class] .skkc-inactive-box-fallback a:hover {
    color: var(--skkc-cta, #28528d);
    text-decoration: underline;
}
/* Läs-recension-länken är sekundär och ska inte konkurrera med knappen. */
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .lab-komponent[class][class][class] .llc-readmore {
    color: var(--llc-soft, #5b6675);
    text-decoration: none;
}
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .lab-komponent[class][class][class] .llc-readmore:hover {
    color: var(--llc-brand-dark, #193357);
    text-decoration: underline;
}

/* ---------- 4. Bilder ----------
   Sajten rundar hörnen på alla bilder i artikeln. Logotyper ska ligga plant
   mot sin platta, annars kapas kanterna på breda ordbildsloggor. */
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .lab-komponent[class][class] :is(.llc-logo,.llc-cmp-logo,.skkc-cmp-logo) img {
    border-radius: 0;
    box-shadow: none;
}

/* ---------- 5. Definitionslistor ----------
   Nyckeltalen i relaterade kort ligger i dl/dt/dd. Sajtens dl-regel ger dd ett
   indrag på 16px och dt märkesblå färg, vilket bryter kolumnrutnätet. */
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .lab-komponent[class][class] :is(.skkc-card-stats,.skkc-related-card-stats) :is(dt,dd) {
    margin: 0;
    color: inherit;
}

/* ---------- 6. Skyddsnät för listor och rubriker ----------
   Punkt 1 i huvudkommentaren bygger på att sajtens :not([class*="lab-"] *)
   finns kvar. Skulle den mönstret försvinna ur den globala CSS:en håller
   reglerna nedan ändå layouten intakt. */
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .lab-komponent[class][class] :is(.skkc-cards,.llc-pros,.skkc-card-features,.skkc-mag-pros,.skkc-fordelar,.skkc-inactive-list-items) {
    padding-left: 0;
    margin: 0;
}
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .lab-komponent[class][class] :is(.skkc-cards,.llc-pros,.skkc-inactive-list-items) > li::marker {
    content: none;
}
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .lab-komponent[class][class] :is(.llc-name,.llc-cc-name,.skkc-card-title,.skkc-ed-title,.skkc-mag-title) {
    margin: 0 0 8px;
}
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .lab-komponent[class][class] .llc-name {
    margin: 0;
}
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .lab-komponent[class][class] .skkc-info-col h2 {
    margin: 0 0 12px;
    font-size: 1.3em;
}
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .lab-komponent[class][class] .skkc-inactive-list-heading {
    margin: 0 0 6px;
    font-size: 1.15rem;
}

/* ---------- 7. Särskild upplysning enligt KOVFS 2025:1 ----------
   Formkraven är bundna: svart text mot vit bakgrund, framträdande placering och
   en röd triangel som är minst lika hög som tre av textraderna. Färgerna får
   därför inte ärvas från sajtens variabler, och specificiteten är uppskruvad så
   att globala regler inuti .entry-content inte kan färga om rutan. Symbolen
   sätts i em mot radhöjden 1.6, alltså 4.8em = exakt tre rader, och ligger
   något över för marginal. */
.skkc-kovfs,
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .skkc-kovfs[class][class] {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin: 24px 0 8px;
    padding: 18px 20px;
    background: #ffffff;
    color: #000000;
    border: 1px solid #d8d8d8;
    border-radius: 4px;
    line-height: 1.6;
}
.skkc-kovfs-symbol,
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .skkc-kovfs[class][class] .skkc-kovfs-symbol {
    flex: 0 0 auto;
    width: 5.2em;
    height: 5.2em;
    margin-top: 2px;
}
.skkc-kovfs-text,
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .skkc-kovfs[class][class] .skkc-kovfs-text {
    min-width: 0;
}
.skkc-kovfs p,
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .skkc-kovfs[class][class] p {
    margin: 0 0 8px;
    color: #000000;
    line-height: 1.6;
}
.skkc-kovfs p:last-child,
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .skkc-kovfs[class][class] p:last-child {
    margin-bottom: 0;
}
.skkc-kovfs-rubrik strong,
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .skkc-kovfs[class][class] .skkc-kovfs-rubrik strong {
    font-weight: 700;
    color: #000000;
}

/* Sajtens egen fördjupning. Ligger utanför den vita rutan, eftersom den
   föreskrivna texten inte får blandas ut med egna formuleringar. */
.skkc-kovfs-tillagg,
:is(.entry,.entry-content,.post-content,.wp-block-post-content)[class][class] .lab-komponent[class][class] .skkc-kovfs-tillagg {
    margin: 0 0 20px;
    font-size: 0.88em;
    line-height: 1.6;
    color: var(--skkc-text-soft, #5b6675);
}

/* ==========================================================================
   ENSKILD FÖRETAGSSIDA, TOPPEN (v1.0.1)
   Loggan ersätter rubriken när den finns, eftersom en ordbildslogga och en
   H1 med samma text blir en upprepning. Titeln ligger kvar i koden för
   sökmotorer och skärmläsare, dold på skärm men läsbar för hjälpmedel.
   ========================================================================== */
.skkc-visuellt-dold {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Reklamidentifiering under CTA-knappen. Ersätter den tidigare
   "Annons"-brickan, som tog plats på knappen utan att förklara något. */
.skkc-single-disclosure {
    margin: 10px 0 0;
    font-size: 0.82em;
    line-height: 1.5;
    color: var(--skkc-text-soft, #5b6675);
    font-style: italic;
    text-align: center;
}