/* ==============================================================
   EccoPrint Landing Pages CSS
   Scope: Klistermarker-på-rulle.html + Klistermarker-med-logo.html
   Spec: docs/superpowers/specs/2026-04-22-klistermarker-landing-pages-design.md

   Afhænger af variabler fra eccoprint-shared.css (--ecco-primary, osv.)
   Skal indlæses EFTER eccoprint-shared.css.
   ============================================================== */

/* ==============================================================
   0. Spacing tokens — 8px grid system (4px for fine-grain)
   All padding, margin, gap should use these tokens going forward.
   Numbers correspond to 4px increments (s-1 = 4px, s-2 = 8px, ...)
   ============================================================== */

:root {
    --s-1: 4px;    /* tiny — inline spacing, fine adjustments */
    --s-2: 8px;    /* small — tight gaps, badge padding */
    --s-3: 12px;   /* sm — button gap, icon+text spacing */
    --s-4: 16px;   /* base — typical margin, small padding */
    --s-5: 20px;   /* md — card inner padding */
    --s-6: 24px;   /* lg — section gap, card padding */
    --s-8: 32px;   /* xl — between section items */
    --s-10: 40px;  /* 2xl — section padding, gap between sections */
    --s-12: 48px;  /* 3xl — hero inner padding */
    --s-14: 56px;  /* 4xl — hero padding top/sides */
    --s-16: 64px;  /* 5xl — large hero elements */
    --s-20: 80px;  /* 6xl — big vertical rhythm */
    --s-24: 96px;  /* 7xl — section separation */
}

/* ==============================================================
   1. Page wrapper — override shared.css max-width
   ============================================================== */

/* Magento's outer main wrapper — fjern top-padding så vores material-page
   starter direkte under header uden ekstra luft. */
main#maincontent {
    padding-top: 0;
}

/* 1. Page wrapper */

main.material-page {
    max-width: 1600px !important;
    margin: 20px auto;
    padding: 30px;
    background: var(--ecco-white);
    box-shadow: var(--ecco-shadow);
    border-radius: 10px;
    font-size: 17px;
    line-height: 1.7;
    color: var(--ecco-text-dark);
    overflow: visible;
}

/* Wrapper skrumper progressivt på smalle viewports — frigør indholdsbredde */
@media (max-width: 768px) {
    main.material-page {
        padding: 16px;
        margin: 12px auto;
        font-size: 16px;
    }
}
@media (max-width: 480px) {
    main.material-page {
        padding: 10px;
        margin: 8px auto;
    }
}

/* ==============================================================
   2. Bånd-system — 3 backgrounds med alternering
   ============================================================== */

/* 2. Bånd-system */

/* Most sections are white "cards" with subtle shadow.
   Only special emphasis sections get a bg color. */

.material-page > .material-section,
.material-page > .why-choose-stickers,
.material-page > .our-materials,
.material-page > .usage-section,
.material-page > .expert-advice-section,
.material-page .expert-advice-section,
.material-page > .material-list,
.material-page > .faq-section,
.material-page > .industry-section,
.material-page > .testimonials-section {
    background: var(--ecco-white);
    border-radius: 10px;
    box-shadow: var(--ecco-shadow-sm);
    padding: var(--s-10) var(--s-10) var(--s-14);
    margin-bottom: var(--s-10);
}

/* Process steps get lys-grå to stand out as "how it works" moment */
.material-page > .material-section.dark-background {
    background: var(--ecco-light-bg);
    box-shadow: var(--ecco-shadow-sm);
    border-radius: 10px;
    padding: var(--s-10);
    margin-bottom: var(--s-10);
}

/* Final CTA: softer navy gradient (less dominant, lighter overall tone) */
.material-page > .forside {
    background: linear-gradient(135deg, #4a5266 0%, #3a4258 60%, #343a4c 100%);
    color: var(--ecco-white);
    border-radius: 10px;
    box-shadow: var(--ecco-shadow-sm);
    padding: var(--s-8);
    margin-top: var(--s-10);
    margin-bottom: var(--s-5);
    position: relative;
    overflow: hidden;
}

/* Atmospheric accent glow — paired rhythm with hero's corner decoration.
   Hero has glow top-right; forside has glow bottom-left for symmetry.
   Reduced opacity to match softer gradient. */
.material-page > .forside::before {
    content: "";
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(173, 130, 94, 0.12) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    border-radius: 50%;
}

/* Ensure content sits above the decorative glow */
.material-page > .forside > * {
    position: relative;
    z-index: 1;
}

/* ==============================================================
   3. Typografi-skala
   ============================================================== */

/* 3. Typografi */

/* Typography — match existing site pattern (Poppins for headings, Roboto body) */
.material-page h1,
.material-page h2,
.material-page h3,
.material-page h4,
.material-page h5,
.material-page h6 {
    font-family: 'Poppins', Helvetica, Arial, sans-serif;
    color: var(--ecco-primary);
    margin-top: 0;
    border-left: none;
    padding-left: 0;
}

.material-page h1 {
    font-size: 3em;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin-bottom: 0.4em;
    border-bottom: none;
    padding-bottom: 0;
}

.material-page h2 {
    font-size: 2em;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
    color: var(--ecco-primary-light);
    margin-bottom: 0.8em;
    border-bottom: none;
    padding-bottom: 0;
}

.material-page h3 {
    font-size: 1.5em;
    font-weight: 600;
    line-height: 1.3;
    color: var(--ecco-primary);
    margin-bottom: 0.6em;
    border-bottom: none;
    padding-bottom: 0;
}

.material-page h5 {
    font-size: 1.2em;
    font-weight: 500;
    color: var(--ecco-primary-light);
    line-height: 1.5;
    margin-bottom: 1em;
}

.material-page h6 {
    font-size: 0.95em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ecco-accent-dark);
    line-height: 1.4;
    margin-top: 1.5em;
    margin-bottom: 0.8em;
}

.material-page p,
.material-page li {
    font-size: 16px;
    line-height: 1.6;
    color: var(--ecco-text-dark);
    margin-bottom: 0.9em;
}

/* På navy bånd: invertér farver */
.material-page > .forside h1,
.material-page > .forside h2,
.material-page > .forside h3,
.material-page > .forside h4,
.material-page > .forside h5,
.material-page > .forside h6,
.material-page > .forside p,
.material-page > .forside strong {
    color: var(--ecco-white);
}

.material-page > .forside h6 {
    color: var(--ecco-accent);
}

.material-page > .forside a:not(.cta-button-cms):not(.cta-button-secondary) {
    color: var(--ecco-white);
    text-decoration: underline;
    text-decoration-color: var(--ecco-accent);
    text-underline-offset: 3px;
}

/* ==============================================================
   4. Hero (centreret, forbedret)
   ============================================================== */

/* 4. Hero — split 2-col: content 45 / image 55. Trust-bar spans full hero width */

.material-page > header.material-header.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr auto;
    gap: var(--s-10);
    align-items: center;
    text-align: left;
    padding: var(--s-14) var(--s-14) var(--s-10);
    margin: 0 0 var(--s-10);
    max-width: none;
    box-shadow: var(--ecco-shadow-sm);
    background:
        radial-gradient(circle at 15% 20%, rgba(173, 130, 94, 0.05) 0%, transparent 60%),
        linear-gradient(135deg, var(--ecco-light-bg) 0%, #fbfcfd 60%, var(--ecco-white) 100%);
    border-radius: 14px;
    position: relative;
    overflow: hidden;
}

/* Subtle decorative accent in top-right corner of hero */
.material-page > header.material-header.hero-split::before {
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle, rgba(173, 130, 94, 0.08) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.material-page .hero-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 1;
    gap: 0;
}

/* Editorial kicker above H1 — brand authority signal */
.material-page .hero-kicker {
    display: inline-block;
    font-size: 0.78em;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ecco-accent-dark);
    margin-bottom: 1.2em;
    padding-bottom: 0.5em;
    border-bottom: 2px solid var(--ecco-accent);
    line-height: 1.4;
}

.material-page .hero-content h1 {
    font-size: 2.6em;
    line-height: 1.1;
    letter-spacing: -0.015em;
    margin-bottom: 0.45em;
    color: var(--ecco-primary);
    text-align: left;
    align-self: stretch;
    width: 100%;
    margin-left: 0;
    padding-left: 0;
}

.material-page .hero-lead {
    font-size: 1.1em;
    line-height: 1.6;
    color: var(--ecco-text-dark);
    margin-bottom: 1.6em;
    max-width: 520px;
    text-wrap: pretty;
}

.material-page .hero-ctas {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 0;
}

.material-page .hero-ctas .cta-button-cms,
.material-page .hero-ctas .cta-button-secondary {
    min-width: 0;
    max-width: none;
}

/* Trust-bar: spans FULL hero width below content + image, with icons */
.material-page .trust-bar {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    list-style: none;
    padding: 22px 0 0;
    margin: 32px 0 0;
    border-top: 1px solid var(--ecco-border);
    width: 100%;
    grid-column: 1 / -1;
    grid-row: 2;
}

.material-page .trust-bar li {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 0.95em;
    line-height: 1.3;
    color: var(--ecco-text-dark);
    margin: 0;
    padding: 0 16px;
    position: relative;
}

.material-page .trust-bar li + li {
    border-left: 1px solid var(--ecco-border);
}

.material-page .trust-bar li::before {
    content: "";
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--ecco-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ecco-white);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1em;
    box-shadow: 0 2px 6px rgba(173, 130, 94, 0.3);
}

/* Distinct icon glyph per trust item using attribute hook */
.material-page .trust-bar li:nth-child(1)::before { content: "★"; font-size: 1.2em; }
.material-page .trust-bar li:nth-child(2)::before { content: "♻"; font-size: 1.2em; }
.material-page .trust-bar li:nth-child(3)::before { content: "✓"; font-size: 1.25em; }

.material-page .trust-bar li strong {
    font-size: 1.15em;
    font-weight: 700;
    color: var(--ecco-primary);
    font-family: 'Poppins', sans-serif;
    display: block;
    line-height: 1.1;
    margin-bottom: 2px;
}

.material-page .trust-bar li span {
    font-size: 0.78em;
    color: var(--ecco-text);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 500;
}

.material-page .hero-image {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-column: 2;
    grid-row: 1;
    position: relative;
    z-index: 1;
}

/* Hero image stands alone — no card chrome. Product shots have their own
   baked-in drop shadows, and flat images look cleaner without double framing. */
.material-page .hero-image img {
    width: 100%;
    height: auto;
    max-height: 460px;
    object-fit: contain;
    border-radius: 0;
    box-shadow: none;
    display: block;
    transition: transform 0.4s ease;
}

.material-page .hero-image img:hover {
    transform: translateY(-3px);
}

/* Secondary CTA — fixed 52px height identical to primary */
.material-page .cta-button-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 32px;
    background: transparent;
    color: var(--ecco-primary);
    text-decoration: none;
    border: 2px solid var(--ecco-primary);
    border-radius: var(--ecco-radius);
    box-sizing: border-box;
    font-size: 0.95em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
    cursor: pointer;
    text-align: center;
    line-height: 1;
}

.material-page .cta-button-secondary:hover {
    background: var(--ecco-primary);
    color: var(--ecco-white);
}

/* Feature cards — paired rhythm with hero trust-bar + industry cards
   (inline SVG icon in accent-tinted circle, unified hover pattern). */
.material-page > .feature-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-6);
    align-items: stretch;
    background: transparent;
    padding: 0;
    margin: 0 0 var(--s-10);
    max-width: none;
    box-shadow: none;
    border-radius: 0;
}

.material-page > .feature-cards > .feature-card {
    background: var(--ecco-white);
    padding: var(--s-10) var(--s-8) var(--s-8);
    border-radius: 12px;
    box-shadow: var(--ecco-shadow-sm);
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Unified hover: lift + shadow + icon circle intensifies (matches
   industry-cards + stat-cards pattern — no extra top-border flavor). */
.material-page > .feature-cards > .feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ecco-shadow);
}

/* Icon in accent-tinted circle — same size as industry-card icons for
   visual consistency across paired-rhythm sections. */
.material-page > .feature-cards > .feature-card > .feature-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--s-5);
    background: var(--ecco-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ecco-white);
    transition: background 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
}

.material-page > .feature-cards > .feature-card:hover > .feature-icon {
    background: var(--ecco-accent-dark);
    color: var(--ecco-white);
}

.material-page > .feature-cards > .feature-card > .feature-icon svg {
    width: 32px;
    height: 32px;
    display: block;
}

.material-page > .feature-cards > .feature-card h3 {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--ecco-primary);
    margin-bottom: var(--s-2);
    font-family: 'Poppins', sans-serif;
    line-height: 1.3;
}

.material-page > .feature-cards > .feature-card p {
    font-size: 0.95em;
    line-height: 1.55;
    color: var(--ecco-text);
    margin: 0 auto;
    max-width: 36ch;
    flex-grow: 1;
}

/* ==============================================================
   5. Benefits strip
   ============================================================== */

/* 5. Benefits strip */

.material-page .header-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
    max-width: 1000px;
    margin: 2.5em auto 0;
    padding: 2em 1em 0;
    background: transparent;
    border-top: 1px solid var(--ecco-border);
}

.material-page .header-benefits .benefit {
    position: relative;
    padding: 0 1em;
    text-align: center;
    max-width: none;
}

/* Vertikal divider mellem benefits */
.material-page .header-benefits .benefit:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -1em;
    top: 15%;
    bottom: 15%;
    width: 1px;
    background: var(--ecco-border);
}

.material-page .header-benefits .benefit img {
    width: 72px;
    height: 72px;
    object-fit: contain;
    margin-bottom: 1em;
    opacity: 0.95;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.material-page .header-benefits .benefit:hover img {
    opacity: 1;
    transform: translateY(-2px);
}

.material-page .header-benefits h3 {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--ecco-primary);
    margin-bottom: 0.5em;
}

.material-page .header-benefits p {
    font-size: 0.95em;
    line-height: 1.6;
    color: var(--ecco-text);
    margin-bottom: 0;
}

/* ==============================================================
   6. Why-choose (50/50 grid billede + tekst)
   ============================================================== */

/* 6. Why-choose */

/* Why-choose renders as a card (card-chrome from section 2 applies).
   Inside: grid 50/50 for image + text when 2 children exist.
   align-items: center so text + image naturally align vertically without
   image dominating (image gets max-height cap below). */
.material-page > .why-choose-stickers {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--s-10);
    align-items: center;
    padding: var(--s-10) var(--s-10) var(--s-14);
}

/* Hvis sektionen har to direct-children — grid 50/50 */
.material-page > .why-choose-stickers:has(> div:nth-child(2)) {
    grid-template-columns: 1fr 1fr;
    gap: var(--s-12);
}

/* Children: transparent (no nested card chrome inside outer card) */
.material-page > .why-choose-stickers > div {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    max-width: none;
    transform: none;
    transition: none;
}

.material-page > .why-choose-stickers > div:hover {
    transform: none;
    box-shadow: none;
}

/* Billedbærende div: fylder sin grid-celle */
.material-page > .why-choose-stickers > div:has(picture),
.material-page > .why-choose-stickers > div:has(img) {
    display: flex;
    align-items: stretch;
}

.material-page > .why-choose-stickers > div > picture,
.material-page > .why-choose-stickers > div > img {
    width: 100%;
    height: auto;
    max-height: 420px;
    object-fit: contain;
    border-radius: var(--ecco-radius);
    display: block;
    margin: 0;
}

.material-page > .why-choose-stickers h2 {
    font-size: 1.75em;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-wrap: balance;
    margin-bottom: var(--s-4);
    padding-bottom: var(--s-3);
    text-align: left;
    position: relative;
}

/* Small accent underline anchor between H2 and body */
.material-page > .why-choose-stickers h2::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 48px;
    height: 3px;
    background: var(--ecco-accent);
    border-radius: 2px;
}

/* h3 inside why-choose no longer used on rulle page (moved to industry-section).
   Kept rule in case med-logo still uses inline h3 subsections. */
.material-page > .why-choose-stickers h3 {
    font-size: 1.3em;
    font-weight: 600;
    margin-top: var(--s-6);
    margin-bottom: var(--s-3);
    text-align: left;
}

.material-page > .why-choose-stickers p {
    font-size: 1em;
    line-height: 1.65;
    margin-bottom: var(--s-4);
    text-align: left;
}

/* Dampen <strong> emphasis inside paragraphs — too many bolds make the
   eye unable to find a landing point. HTML <strong> preserved for
   marketing/SEO intent; visually normalized to body weight.
   NOTE: strongs inside <li> keep bold (they're lead-term structural markers). */
.material-page > .why-choose-stickers p strong {
    font-weight: 500;
    color: var(--ecco-primary);
}

.material-page > .why-choose-stickers ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: var(--s-4);
    margin-top: var(--s-2);
}

/* CTA inside why-choose gets generous top margin for rhythm */
.material-page > .why-choose-stickers .cta-button-cms {
    margin-top: var(--s-4);
}

/* Lead strong (first bold) in li stays distinct */
.material-page > .why-choose-stickers li > strong:first-child {
    color: var(--ecco-primary);
    font-weight: 700;
    letter-spacing: -0.005em;
    display: inline-block;
    margin-right: var(--s-1);
}

.material-page > .why-choose-stickers li {
    position: relative;
    padding-left: var(--s-6);
    margin-bottom: var(--s-3);
    line-height: 1.6;
}

/* (Lead strong styling moved to 8px-grid block above) */

.material-page > .why-choose-stickers li::before {
    content: "\2713";
    position: absolute;
    left: 0.35em;
    top: 0;
    color: var(--ecco-accent);
    font-size: 1.1em;
}

/* Numbered step-list — bruges på forsiden hvor punkterne er sekventielle
   trin (Størrelse → Materiale → Finish → Upload). Erstatter checkmarks
   med farvet cirkel-badge for at signalere trin-for-trin proces. */
.material-page > .why-choose-stickers ol.step-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: var(--s-4);
    margin-top: var(--s-2);
    counter-reset: step;
}

.material-page > .why-choose-stickers ol.step-list > li {
    position: relative;
    padding-left: 44px;
    margin-bottom: var(--s-4);
    line-height: 1.6;
    counter-increment: step;
    min-height: 28px;
}

.material-page > .why-choose-stickers ol.step-list > li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 28px;
    height: 28px;
    background: var(--ecco-accent);
    color: var(--ecco-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875em;
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    line-height: 1;
    flex-shrink: 0;
}


/* ==============================================================
   7. Our-materials + Usage-table (fullwidth)
   ============================================================== */

/* 7. Our-materials + Usage-table */

/* Our-materials + Usage-section render as cards (card-chrome from section 2).
   Inner structure: optional image + intro + table. */
.material-page > .our-materials,
.material-page > .usage-section {
    display: block;
}

/* Inner children: transparent (no nested chrome inside outer card) */
.material-page > .our-materials > *,
.material-page > .usage-section > * {
    padding: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    transform: none;
    transition: none;
    flex: none;
}

.material-page > .our-materials > div:hover,
.material-page > .usage-section > div:hover {
    transform: none;
    box-shadow: none;
}

.material-page > .our-materials > h2,
.material-page > .usage-section > h2 {
    text-align: center;
    margin-bottom: 1em;
}

/* Intro-paragraf 720px centreret */
.material-page > .our-materials > p,
.material-page > .usage-section > p {
    max-width: 720px;
    margin: 0 auto 2em;
    text-align: center;
}

/* Billede over tabel */
.material-page > .our-materials > div:has(picture) img,
.material-page > .our-materials > div:has(img) > img {
    width: 100%;
    max-width: 900px;
    height: auto;
    max-height: 360px;
    object-fit: cover;
    border-radius: var(--ecco-radius);
    margin: 0 auto 2em;
    display: block;
}

/* Tabel tager fuld bredde */
.material-page > .our-materials table,
.material-page > .usage-section table,
.material-page table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--ecco-radius);
    overflow: hidden;
    margin: 2em 0;
    box-shadow: var(--ecco-shadow-sm);
    border: 1px solid var(--ecco-border);
}

.material-page table thead th {
    background: var(--ecco-primary);
    color: var(--ecco-white);
    padding: 16px 20px;
    text-align: left;
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: none;
}

.material-page table tbody td {
    padding: 16px 20px;
    font-size: 0.95em;
    color: var(--ecco-text);
    line-height: 1.6;
    border: none;
    border-bottom: 1px solid var(--ecco-border);
    background: var(--ecco-white);
}

.material-page table tbody tr:last-child td {
    border-bottom: none;
}

.material-page table tbody tr:nth-child(even) td {
    background: var(--ecco-light-bg);
}

.material-page table tbody td:first-child {
    font-weight: 600;
    color: var(--ecco-primary);
}

.material-page table tbody tr:hover td {
    background: rgba(173, 130, 94, 0.06);
}

.material-page table tbody td strong {
    color: var(--ecco-primary);
    font-weight: 600;
}

/* ==============================================================
   8. Process steps (5-col grid, state indikatorer)
   ============================================================== */

/* 8. Process steps (material-section.dark-background rescued).
   Chrome (bg, radius, shadow, padding, margin) comes from section 2.

   IMPORTANT: Theme CSS (page-sections.css) assumes dark bg + white text.
   We use light-gray bg, so must override all inherited white text colors. */

.material-page > .material-section.dark-background {
    color: var(--ecco-text-dark);
}

.material-page > .material-section.dark-background:hover {
    transform: none;
    box-shadow: var(--ecco-shadow-sm);
}

.material-page .dark-background h1,
.material-page .dark-background h2,
.material-page .dark-background h3,
.material-page .dark-background h4,
.material-page .dark-background h5,
.material-page .dark-background p,
.material-page .dark-background a,
.material-page .dark-background strong {
    color: var(--ecco-text-dark);
}

/* Specifically: call-to-action links inside dark-background (like "Se vores bestillingsguide") */
.material-page .dark-background .call-to-action a:not(.cta-button-cms) {
    color: var(--ecco-accent-dark);
    text-decoration: underline;
    text-decoration-color: var(--ecco-accent);
    text-underline-offset: 3px;
    font-weight: 600;
}

.material-page .dark-background .call-to-action a:not(.cta-button-cms):hover {
    color: var(--ecco-accent-hover);
}

.material-page .dark-background .section-header {
    text-align: center;
    margin-bottom: 3em;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.material-page .dark-background .section-header h2 {
    font-size: 1.8em;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--ecco-primary);
    margin-bottom: 0.8em;
    text-align: center;
}

.material-page .dark-background .section-header p {
    font-size: 1.05em;
    line-height: 1.7;
    color: var(--ecco-text-dark);
    margin: 0;
}

/* Stepper */
.material-page #progress-bar-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto 3em;
    padding: 0 1em;
}

.material-page #progress-bar-container ul {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
    z-index: 2;
}

.material-page #progress-bar-container li.step {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    width: auto;
    flex: 1 1 0;
    position: relative;
    padding: 0 0.5em;
    margin: 0;
    background: transparent;
    text-align: center;
    list-style: none;
}

.material-page #progress-bar-container li.step::before,
.material-page #progress-bar-container li.step::after {
    content: none;
    display: none;
}

/* Higher specificity (#id .class) needed to beat page-sections.css theme rule */
.material-page #progress-bar-container li .step-inner,
.material-page #progress-bar-container li.active .step-inner,
.material-page #progress-bar-container li:hover .step-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9em;
    font-size: 0.85em;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ecco-text);
    line-height: 1.3;
    transition: color 0.3s ease;
}

.material-page #progress-bar-container li.step.active .step-inner {
    color: var(--ecco-primary);
}

/* Higher specificity (#id) needed to beat theme's page-sections.css */
.material-page #progress-bar-container li .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: var(--ecco-white);
    color: var(--ecco-primary);
    border: 2px solid var(--ecco-border-dark);
    border-radius: 50%;
    font-family: Georgia, 'Cambria', serif;
    font-size: 1.3em;
    font-weight: 700;
    transition: all 0.3s ease;
    box-sizing: border-box;
    flex-shrink: 0;
}

.material-page #progress-bar-container li.step.active .step-number {
    background: var(--ecco-accent);
    color: var(--ecco-white);
    border-color: var(--ecco-accent);
    box-shadow: 0 0 0 6px rgba(173, 130, 94, 0.18);
}

/* (redundant rule removed — higher-specificity rule above handles active state) */

/* Horisontal forbindelseslinje */
.material-page #line {
    position: absolute;
    top: 28px;
    left: 1em;
    right: 1em;
    height: 2px;
    background: var(--ecco-border-dark);
    z-index: 1;
    border: none;
}

.material-page #line-progress {
    display: block;
    height: 100%;
    background: var(--ecco-accent);
    width: 10%;
    transition: width 0.6s ease;
    border: none;
}

/* Content-cards under stepper */
.material-page #progress-content-section {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-4);
    max-width: 1200px;
    margin: 0 auto;
}

/* Force all 5 content cards visible (override theme's hide-non-active default).
   Flat design — no border-top accent. Content flows as informational grid. */
.material-page .section-content {
    display: block !important;
    background: var(--ecco-white);
    border: none;
    border-radius: 10px;
    padding: var(--s-5);
    box-shadow: var(--ecco-shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
    color: var(--ecco-text);
    cursor: pointer;
}

.material-page .section-content:hover {
    transform: translateY(-4px);
    box-shadow: var(--ecco-shadow);
}

/* Active card: accent-tinted glow ring + slight lift (visual "you are here"
   signal when user clicks a step number). No border-top flavor used. */
.material-page .section-content.active {
    background: var(--ecco-white);
    box-shadow:
        0 0 0 2px var(--ecco-accent),
        0 8px 20px rgba(173, 130, 94, 0.18);
    transform: translateY(-2px);
}

.material-page .section-content.active h2 {
    color: var(--ecco-accent-dark);
}

.material-page .section-content h2 {
    font-size: 1em;
    font-weight: 700;
    color: var(--ecco-primary);
    margin: 0 0 var(--s-2) 0;
    padding: 0;
    text-align: left;
    border: none;
    line-height: 1.3;
    text-transform: none;
    font-family: 'Poppins', sans-serif;
}

/* Kill ALL theme decorations on section-content (horizontal lines, quote glyphs) */
.material-page .section-content::before,
.material-page .section-content::after,
.material-page .section-content h2::before,
.material-page .section-content h2::after,
.material-page .section-content p::before,
.material-page .section-content p::after {
    content: none !important;
    display: none !important;
    border: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
}

.material-page .section-content p {
    font-size: 0.92em;
    line-height: 1.6;
    color: var(--ecco-text);
    margin: 0;
    text-align: left;
}

/* ==============================================================
   9. FAQ (2-col + horisontal separator)
   ============================================================== */

/* 9. FAQ */

/* FAQ section: card-chrome from section 2. This adds inner layout only. */
.material-page > .faq-section {
    text-align: center;
}

.material-page > .faq-section > h2 {
    text-align: center;
    margin-bottom: var(--s-6);
}

/* FAQ: native <details>/<summary> accordion with subtle toggle chevron */
.material-page .faq-item {
    text-align: left;
    margin: 0;
    padding: 0;
    border: none;
    border-top: 1px solid var(--ecco-border);
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    transition: none;
}

.material-page .faq-item > summary {
    list-style: none;
    cursor: pointer;
    padding: var(--s-4) var(--s-8) var(--s-4) 0;
    position: relative;
    user-select: none;
}

.material-page .faq-item > summary::-webkit-details-marker { display: none; }

.material-page .faq-item > summary::after {
    content: "+";
    position: absolute;
    right: var(--s-1);
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4em;
    color: var(--ecco-accent);
    font-weight: 400;
    line-height: 1;
    transition: transform 0.25s ease;
}

/* Smooth +/× via 45° rotation (keeps same glyph, animates instead of swap) */
.material-page .faq-item[open] > summary::after {
    content: "+";
    transform: translateY(-50%) rotate(45deg);
}

.material-page .faq-item > summary:hover h3 {
    color: var(--ecco-accent-dark);
}

.material-page .faq-item > summary h3 {
    display: inline;
    font-size: 1.02em;
    font-weight: 600;
    color: var(--ecco-primary);
    margin: 0;
    padding: 0;
    border-bottom: none;
    text-align: left;
    letter-spacing: 0;
    font-family: 'Poppins', Helvetica, Arial, sans-serif;
    transition: color 0.2s ease;
}

.material-page .faq-item p,
.material-page .faq-item ul,
.material-page .faq-item li {
    font-size: 0.95em;
    color: var(--ecco-text);
    margin-bottom: 0.5em;
    line-height: 1.6;
    text-align: left;
}

.material-page .faq-item[open] > p,
.material-page .faq-item[open] > ul {
    padding-bottom: var(--s-4);
    padding-right: var(--s-8);
    animation: faqReveal 0.3s ease;
}

@keyframes faqReveal {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 2-col grid på desktop — balance asymmetric rows by spanning last-odd child */
@media (min-width: 900px) {
    .material-page > .faq-section {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: 2.5em;
        row-gap: 0;
        align-items: start;
    }

    .material-page > .faq-section > h2 {
        grid-column: 1 / -1;
    }

    /* Last FAQ spans both columns when odd-numbered total (no empty gap) */
    .material-page > .faq-section > details:last-of-type:nth-of-type(odd) {
        grid-column: 1 / -1;
    }

    .material-page .faq-item {
        margin: 0;
    }
}

/* ==============================================================
   10. Contact/forside (navy gradient, 55/45 grid)
   ============================================================== */

/* 10. Contact/forside */

/* Forside: chrome comes from section 2. This adds inner 50/50 layout. */
.material-page > .forside {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--s-8);
    min-height: 360px;
}

.material-page > .forside > .col-md-6 {
    flex: 1 1 calc(50% - var(--s-4));
    max-width: calc(50% - var(--s-4));
    padding: 0;
    background: transparent;
    display: flex;
    align-items: center;
}

/* Override inline style="background: #f5f7fa" på last col */
.material-page > .forside > .col-md-6[style*="background"] {
    background: transparent !important;
    padding: 0 !important;
}

.material-page > .forside .ox-banner,
.material-page > .forside .ox-banner-medium {
    width: 100%;
    height: 100%;
    min-height: 320px;
    border-radius: var(--ecco-radius);
    overflow: hidden;
    background: var(--ecco-white);
}

.material-page > .forside .ox-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--ecco-radius);
    display: block;
}

.material-page > .forside h3 {
    font-size: 2em;
    font-weight: 700;
    margin-bottom: var(--s-3);
}

.material-page > .forside p {
    font-size: 1.05em;
    line-height: 1.7;
    margin-bottom: var(--s-4);
}

/* In forside context: remove outer shadow + extra margin-top
   (container .forside-ctas already provides spacing to text above) */
.material-page > .forside .cta-button-cms {
    background: var(--ecco-accent);
    color: var(--ecco-white);
    border: 2px solid var(--ecco-accent);
    margin-top: 0;
    box-shadow: none;
}

.material-page > .forside .cta-button-cms:hover {
    background: var(--ecco-accent-hover);
    color: var(--ecco-white);
    border-color: var(--ecco-accent-hover);
    box-shadow: none;
}

/* ==============================================================
   11. Expert-advice + Material-icon + Tips (med-logo-specifikke)
   ============================================================== */

/* Expert-advice: chrome from section 2 rule. Inner content has own layout. */
.material-page .expert-advice-section > * {
    max-width: none;
}

/* Centered variant — H2 + intro centered, footer-link centered */
.material-page .expert-advice-centered > h2,
.material-page .expert-advice-centered > .section-intro {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.material-page .expert-advice-centered > .section-intro {
    max-width: 720px;
}

.material-page .expert-advice-centered > .section-footer-link {
    text-align: center;
}

.material-page .expert-content {
    background: var(--ecco-light-bg);
    padding: 2em;
    border-radius: var(--ecco-radius);
    box-shadow: none;
    border: 1px solid var(--ecco-border);
}

.material-page .expert-content h3 {
    font-size: 1.4em;
    margin-bottom: 1em;
}

.material-page .expert-tips {
    margin: 1.5em 0;
    padding: 0;
    list-style: none;
}

.material-page .expert-tips li {
    position: relative;
    padding-left: 1.75em;
    margin-bottom: 0.8em;
    line-height: 1.7;
}

.material-page .expert-tips li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--ecco-accent);
    font-weight: 700;
    font-size: 1.1em;
}

.material-page .expert-footer {
    margin-top: 2em;
    padding-top: 1.5em;
    border-top: 1px solid var(--ecco-border);
    font-size: 0.95em;
    color: var(--ecco-text-light);
}

/* Material-icon: billede + tekst kombo */
.material-page .material-icon {
    display: flex;
    align-items: center;
    gap: 1em;
    margin-bottom: 1em;
}

.material-page .material-icon img {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    object-fit: contain;
}

/* Tips-list (normal bulleted liste) */
.material-page .tips-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1em;
}

.material-page .tips-list li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.7em;
    line-height: 1.7;
}

.material-page .tips-list li::before {
    content: "\2022";
    position: absolute;
    left: 0.35em;
    color: var(--ecco-accent);
    font-size: 1.1em;
}

.material-page .tips-link,
.material-page .blog-link {
    color: var(--ecco-accent-dark);
    text-decoration: underline;
    text-decoration-color: var(--ecco-accent);
    text-underline-offset: 3px;
    font-weight: 600;
}

.material-page .tips-link:hover,
.material-page .blog-link:hover {
    color: var(--ecco-accent-hover);
}

/* ==============================================================
   12. Komponent-undtagelser (blockquote, CTA, tables)
   ============================================================== */

/* Typisk-anvendelse blockquote — ekspert-råd card (NOT customer testimonial).
   Subtle light-gray bg with small accent border-left to signal "advisory",
   not the big decorative quote glyph that looked testimonial-like. */
.material-page .typisk-anvendelse blockquote,
.material-page blockquote.typisk-anvendelse {
    position: relative;
    padding: 1.75em 2em 1.75em 2em;
    background: var(--ecco-light-bg);
    border-left: 3px solid var(--ecco-accent);
    border-radius: 0 var(--ecco-radius) var(--ecco-radius) 0;
    box-shadow: none;
    margin: 2em 0;
    font-style: normal;
    font-size: 1em;
    line-height: 1.6;
    max-width: 100%;
    overflow: hidden;
}

/* Remove the big decorative quote glyph — kept it testimonial-looking */
.material-page .typisk-anvendelse blockquote::before,
.material-page blockquote.typisk-anvendelse::before {
    content: none;
    display: none;
}

.material-page .typisk-anvendelse blockquote h3,
.material-page blockquote.typisk-anvendelse h3 {
    position: relative;
    font-size: 0.82em;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ecco-accent-dark);
    margin-bottom: 0.75em;
}

.material-page .typisk-anvendelse blockquote p,
.material-page blockquote.typisk-anvendelse p {
    font-family: inherit;
    font-style: normal;
    font-size: 1em;
    line-height: 1.6;
    color: var(--ecco-text-dark);
    margin-bottom: 0.75em;
}

.material-page .typisk-anvendelse blockquote p:last-of-type,
.material-page blockquote.typisk-anvendelse p:last-of-type {
    font-family: inherit;
    font-style: normal;
    font-size: 0.85em;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ecco-text);
    margin-top: 1.5em;
    margin-bottom: 0;
}

.material-page .typisk-anvendelse blockquote p:last-of-type strong,
.material-page blockquote.typisk-anvendelse p:last-of-type strong {
    color: var(--ecco-primary);
    font-weight: 700;
}

/* Neutralize shared.css card chrome on plain .material-section (non dark-background) */
/* Plain .material-section chrome handled in section 2 unified card rule.
   Only need to neutralize hover transform. */
.material-page .material-section:not(.dark-background):hover {
    transform: none;
    box-shadow: var(--ecco-shadow-sm);
}

/* CTA button — fixed 52px height guarantees equal height with secondary */
.material-page .cta-button-cms {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    height: 52px;
    padding: 0 32px;
    min-width: 260px;
    max-width: 360px;
    background: var(--ecco-accent);
    color: var(--ecco-white);
    text-decoration: none;
    border: 2px solid transparent;
    border-radius: var(--ecco-radius);
    box-sizing: border-box;
    font-size: 0.95em;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 12px rgba(173, 130, 94, 0.25);
    cursor: pointer;
    text-align: center;
    line-height: 1;
}

.material-page .cta-button-cms::after {
    content: "\2192";
    font-size: 1.1em;
    font-weight: 400;
    margin-left: 0.2em;
    transition: transform 0.3s ease;
}

.material-page .cta-button-cms:hover {
    background: var(--ecco-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(154, 115, 82, 0.35);
    color: var(--ecco-white);
}

.material-page .cta-button-cms:hover::after {
    transform: translateX(4px);
}

/* ==============================================================
   13. Responsive breakpoints — konsolideret: 1024 / 900 / 768 / 480
   ============================================================== */

/* ≤900px — tablet/iPad portrait: 50/50 layouts kollapser + section padding reduceres */
@media (max-width: 900px) {
    .material-page > .why-choose-stickers {
        grid-template-columns: 1fr;
        gap: 2em;
        padding: var(--s-8) var(--s-6);
    }

    .material-page > .why-choose-stickers:has(> div:nth-child(2)) {
        grid-template-columns: 1fr;
    }

    .material-page > .why-choose-stickers > div:has(picture),
    .material-page > .why-choose-stickers > div:has(img) {
        order: -1;
    }

    .material-page > .why-choose-stickers > div > picture img,
    .material-page > .why-choose-stickers > div > img {
        max-height: 320px;
    }

    .material-page > .faq-section {
        grid-template-columns: 1fr;
        padding: var(--s-8) var(--s-6);
    }

    .material-page > .forside {
        padding: var(--s-8) var(--s-6);
        min-height: 0;
    }

    .material-page > .forside > .col-md-6 {
        flex: 1 1 100%;
        max-width: 100%;
    }

    .material-page > .forside > .col-md-6:first-child {
        padding: 0 0 2em;
    }

    .material-page > .forside > .col-md-6:last-child {
        padding: 0;
    }
}

/* ≤768px — mobil + iPad portrait edge: tightest typografi + flere sektioner kollapser */
@media (max-width: 768px) {
    .material-page > header.material-header {
        padding: 2em 1em 2.5em;
    }

    .material-page > header.material-header > h1 {
        font-size: 1.9em;
    }

    .material-page > header.material-header > h2 {
        font-size: 1em;
    }

    .material-page h2 {
        font-size: 1.3em;
    }

    .material-page h3 {
        font-size: 1.1em;
    }

    .material-page > .header-benefits {
        grid-template-columns: 1fr;
        gap: 1.5em;
        padding: 2em 1em;
    }

    .material-page .header-benefits .benefit:not(:last-child)::after {
        display: none;
    }

    .material-page > .our-materials,
    .material-page > .usage-section,
    .material-page > .expert-advice-section {
        padding: var(--s-8) var(--s-5);
    }

    .material-page table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .material-page > .material-section.dark-background {
        padding: var(--s-8) var(--s-5);
    }

    .material-page .dark-background .section-header h2 {
        font-size: 1.5em;
    }

    /* Stepper — vertikal liste på mobil + iPad portrait (≤768).
       Hvert trin bliver en row med [nummer-cirkel] [label] side-by-side via
       CSS grid. Defensiv brug af !important for at beate theme's
       page-sections.css som positionerer .step-number absolut på andre sider.
       #line og #progress-content-section skjules på mobil. */

    /* Force dark-background section + process-wrapper til static flow så CTA
       ikke overlapper step-cards (theme CSS bruger absolut positioning her) */
    .material-page > .material-section.dark-background {
        display: block !important;
        position: relative !important;
    }

    .material-page > .material-section.dark-background > .process-wrapper {
        display: block !important;
        position: static !important;
    }

    /* KRITISK: theme page-sections.css sætter `height: 100px` på containeren.
       Det er designet til horizontal 5-col layout. Med min vertikale liste
       overflower 5 cards (~350px) ud af 100px-containeren, og .call-to-action
       positionerer sig efter de kendte 100px → overlapper step 3-4. */
    .material-page #progress-bar-container {
        padding: 0;
        position: static !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        background: transparent !important;
    }

    /* Scrub invalid <div> descendants of <ul> (HTML spec brud: #line er
       <div> inde i <ul>; browsers håndterer det inkonsistent). Hide alt
       der ikke er <li> i ul, og alt der ikke er <ul> i container. */
    .material-page #progress-bar-container ul > *:not(li),
    .material-page #progress-bar-container > *:not(ul) {
        display: none !important;
    }

    .material-page #progress-bar-container ul {
        display: flex !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: var(--s-3);
        margin: 0 !important;
        padding: 0 !important;
        align-items: stretch;
        justify-content: flex-start;
        list-style: none !important;
        background: transparent !important;
    }

    .material-page #progress-bar-container li.step {
        display: block !important;
        flex: 0 0 auto !important;
        max-width: none !important;
        width: 100% !important;
        height: auto !important;
        padding: var(--s-4) !important;
        margin: 0 !important;
        background: var(--ecco-white);
        border-radius: 10px;
        box-shadow: var(--ecco-shadow-sm);
        position: relative;
        transition: box-shadow 0.25s ease, background 0.25s ease;
    }

    .material-page #progress-bar-container li.step.active {
        background: rgba(173, 130, 94, 0.08);
        box-shadow: 0 0 0 2px var(--ecco-accent), var(--ecco-shadow-sm);
    }

    /* Grid layout er mere forudsigeligt end flex med anonym text node.
       Number i 40px-kolonne, label i resterende plads.
       KRITISK: theme page-sections.css har `position: absolute; top: 45px;
       color: #ffffff` på step-inner — det skubber labelen 45px ned, ud af
       parent-cardet og ind i næste step's visuelle område (hvid tekst på
       hvid baggrund = usynlig). Skal nulstilles eksplicit. */
    .material-page #progress-bar-container li .step-inner,
    .material-page #progress-bar-container li.active .step-inner {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        display: grid !important;
        grid-template-columns: 40px 1fr !important;
        flex-direction: unset !important;
        gap: var(--s-4) !important;
        align-items: center !important;
        justify-content: start !important;
        font-size: 0.95em !important;
        font-weight: 600;
        letter-spacing: 0.04em !important;
        line-height: 1.3;
        text-align: left !important;
        text-transform: none !important;
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        color: var(--ecco-text) !important;
    }

    .material-page #progress-bar-container li.step.active .step-inner {
        color: var(--ecco-primary);
    }

    /* Nuke theme's potential absolute-positioning på step-number */
    .material-page #progress-bar-container li .step-number {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 40px !important;
        height: 40px !important;
        font-size: 1em !important;
        margin: 0 !important;
        flex-shrink: 0;
    }

    .material-page #line,
    .material-page #line-progress,
    .material-page #progress-bar-container #line,
    .material-page #progress-bar-container #line-progress {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        width: 0 !important;
    }

    .material-page #progress-content-section {
        display: none !important;
    }

    /* Force call-to-action til static flow — theme CSS bruger absolut positioning
       så CTA-knap + secondary-link overlapper step-cards ellers */
    .material-page > .material-section.dark-background > .call-to-action {
        position: static !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin-top: var(--s-6) !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: var(--s-3) !important;
    }

    .material-page .typisk-anvendelse blockquote,
    .material-page blockquote.typisk-anvendelse {
        padding: 2em 2em 1.5em;
    }

    .material-page .typisk-anvendelse blockquote::before,
    .material-page blockquote.typisk-anvendelse::before {
        font-size: 4em;
    }
}

/* ≤480px — small phone: mindste padding */
@media (max-width: 480px) {
    .material-page > .why-choose-stickers,
    .material-page > .our-materials,
    .material-page > .usage-section,
    .material-page > .expert-advice-section,
    .material-page > .faq-section,
    .material-page > .forside,
    .material-page > .material-section.dark-background {
        padding: var(--s-6) var(--s-4);
    }
}

/* ==============================================================
   13b. Industry spotlight — "Til din branche" full-width card grid
   ============================================================== */

.material-page > .industry-section {
    text-align: center;
}

.material-page > .industry-section > h2 {
    text-align: center;
    margin-bottom: var(--s-4);
    padding-bottom: var(--s-4);
    position: relative;
    display: inline-block;
    font-size: 1.75em;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.material-page > .industry-section > h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 48px;
    height: 3px;
    background: var(--ecco-accent);
    border-radius: 2px;
}

.material-page > .industry-section > .section-intro {
    max-width: 600px;
    margin: 0 auto var(--s-10);
    color: var(--ecco-text);
    font-size: 1em;
    line-height: 1.55;
}

.material-page .industry-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
}

/* 5-col variant for med-logo "5 kreative måder" */
.material-page .industry-grid-five {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-4);
}

@media (max-width: 1024px) {
    .material-page .industry-grid-five {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .material-page .industry-grid-five {
        grid-template-columns: 1fr;
    }
}

.material-page .industry-card {
    background: var(--ecco-light-bg);
    border-radius: 12px;
    padding: var(--s-10) var(--s-6) var(--s-8);
    text-align: center;
    transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.material-page .industry-card:hover {
    background: var(--ecco-white);
    transform: translateY(-4px);
    box-shadow: var(--ecco-shadow-sm);
    border-color: var(--ecco-border);
}

.material-page .industry-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--s-5);
    background: var(--ecco-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ecco-white);
    transition: background 0.3s ease, color 0.3s ease;
    flex-shrink: 0;
}

.material-page .industry-card:hover .industry-icon {
    background: var(--ecco-accent-dark);
    color: var(--ecco-white);
}

.material-page .industry-icon svg {
    width: 24px;
    height: 24px;
    display: block;
}

.material-page .industry-card h3 {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--ecco-primary);
    margin-bottom: var(--s-2);
    font-family: 'Poppins', sans-serif;
    line-height: 1.3;
}

.material-page .industry-card p {
    font-size: 0.95em;
    line-height: 1.55;
    color: var(--ecco-text);
    margin: 0 auto;
    max-width: 30ch;
    flex-grow: 1;
}

/* Mobile: industry grid collapses to 1-col */
@media (max-width: 768px) {
    .material-page .industry-grid {
        grid-template-columns: 1fr;
    }
}

/* ==============================================================
   14. Material card grid (replaces flat table)
   ============================================================== */

.material-page .section-intro {
    font-size: 1em;
    line-height: 1.55;
    color: var(--ecco-text);
    max-width: 720px;
    margin: 0 0 var(--s-8);
}

.material-page .section-footer-link {
    margin-top: var(--s-6);
    margin-bottom: 0;
}

.material-page .section-footer-link a,
.material-page .text-link {
    color: var(--ecco-accent-dark);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid var(--ecco-accent);
    padding-bottom: 1px;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.material-page .section-footer-link a:hover,
.material-page .text-link:hover {
    color: var(--ecco-accent-hover);
    border-color: var(--ecco-accent-hover);
}

.material-page .material-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
    margin: 0 0 var(--s-10);
}

/* Category label — spans full grid width, separates material groups */
.material-page .material-group-label {
    grid-column: 1 / -1;
    font-family: 'Poppins', sans-serif;
    font-size: 0.85em;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--ecco-accent-dark);
    margin: 0 0 var(--s-2);
    padding: 0 0 var(--s-2);
    border-bottom: 1px solid var(--ecco-border);
    line-height: 1.2;
}

/* Second+ label needs top margin (visual separation from cards above) */
.material-page .material-group-label ~ .material-group-label,
.material-page .material-card + .material-group-label {
    margin-top: var(--s-6);
}

.material-page .material-card {
    background: var(--ecco-white);
    border: none;
    border-radius: 10px;
    padding: 0 var(--s-5) var(--s-5);
    box-shadow: var(--ecco-shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Unified hover: lift -4px + deeper shadow with accent tint (section flavor) */
.material-page .material-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(173, 130, 94, 0.20);
}

/* Edge-to-edge swatch: negative horizontal margin pulls swatch past
   card's horizontal padding so it touches card edges. Card's overflow:hidden
   + border-radius clips the swatch to the rounded top corners. */
.material-page .material-swatch {
    width: auto;
    height: 100px;
    margin: 0 calc(-1 * var(--s-5)) var(--s-4);
    border: none;
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    transition: transform 0.35s ease;
}

.material-page .material-card:hover .material-swatch {
    transform: scale(1.015);
}

/* CSS-only material swatches (placeholder until real textures) */
.material-page .swatch-halvblank {
    background: linear-gradient(135deg, #f5f2eb 0%, #ebe5d6 100%);
}

.material-page .swatch-pp-white {
    background:
        linear-gradient(135deg, #ffffff 0%, #eaeaea 100%),
        radial-gradient(ellipse at 40% 30%, rgba(255,255,255,0.9), transparent 60%);
    box-shadow:
        inset 0 0 0 1px rgba(0, 0, 0, 0.08),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
}

/* Transparent PP: glass-look (frosted gradient with subtle reflective shine),
   NOT a checkerboard — that reads as "missing image". */
.material-page .swatch-pp-clear {
    background:
        linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.6) 45%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.6) 55%, transparent 70%),
        linear-gradient(180deg, rgba(205, 220, 232, 0.4) 0%, rgba(180, 200, 220, 0.3) 100%),
        #ffffff;
    position: relative;
}

.material-page .swatch-pp-clear::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 60%;
    height: 1px;
    background: rgba(52, 58, 76, 0.15);
}

.material-page .swatch-pp-clear::before {
    content: "transparent";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75em;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ecco-text-light);
    background: rgba(255, 255, 255, 0.85);
    padding: 2px 10px;
    border-radius: 3px;
    z-index: 1;
}

/* Thermopapir: cool blue-gray tint (real thermo has chemical coating
   that tints it slightly cool) — distinct from warm white Hvid PP */
.material-page .swatch-thermo {
    background: linear-gradient(135deg, #eff4f8 0%, #c8d6e0 100%);
}

.material-page .swatch-antique {
    background: linear-gradient(135deg, #ebdcc2 0%, #d4c09a 100%);
}

.material-page .swatch-silver {
    background: linear-gradient(135deg, #f0f1f3 0%, #b4b8be 45%, #d8dbe0 55%, #949ba4 100%);
}

.material-page .material-card h3 {
    font-size: 1.1em;
    font-weight: 600;
    color: var(--ecco-primary);
    margin-bottom: var(--s-2);
}

.material-page .material-card p {
    font-size: 0.92em;
    line-height: 1.55;
    color: var(--ecco-text);
    margin-bottom: var(--s-3);
    flex-grow: 1;
}

.material-page .material-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.material-page .material-badges li {
    display: inline-block;
    padding: var(--s-1) var(--s-3);
    font-size: 0.78em;
    font-weight: 600;
    color: var(--ecco-accent-dark);
    background: rgba(173, 130, 94, 0.08);
    border: 1px solid rgba(173, 130, 94, 0.25);
    border-radius: 999px;
    letter-spacing: 0.02em;
    line-height: 1.4;
    margin: 0;
}

/* Tips-box (med-logo) — design tips card under expert-quote */
.material-page .tips-box {
    background: var(--ecco-light-bg);
    border-radius: 10px;
    padding: var(--s-6);
    margin: var(--s-8) auto 0;
    max-width: 720px;
}

.material-page .tips-box h3 {
    font-size: 1em;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ecco-accent-dark);
    margin: 0 0 var(--s-4);
}

.material-page .tips-box .tips-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--s-4);
}

.material-page .tips-box .tips-list li {
    position: relative;
    padding-left: var(--s-6);
    margin-bottom: var(--s-2);
    line-height: 1.55;
    color: var(--ecco-text-dark);
    font-size: 0.95em;
}

.material-page .tips-box .tips-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--ecco-accent);
    font-weight: 700;
}

.material-page .tips-box .section-footer-link {
    margin: 0;
}

/* Expert quote — centered testimonial, full-width within section container.
   Design grammar: italic serif for quote (visual "this is spoken"),
   avatar + name/role attribution centered below, no border-left,
   lys-grå container gives gentle emphasis without feeling boxy. */
.material-page .expert-quote {
    background: var(--ecco-light-bg);
    border-radius: 10px;
    padding: var(--s-10) var(--s-8);
    margin: var(--s-8) 0 0;
    max-width: none;
    width: 100%;
    text-align: center;
    position: relative;
}

.material-page .expert-quote blockquote {
    margin: 0 auto var(--s-6) auto;
    padding: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    max-width: 900px;
}

/* Kill ALL theme default blockquote/figure decorations (hr-like lines from theme) */
.material-page .expert-quote::before,
.material-page .expert-quote::after,
.material-page .expert-quote blockquote::before,
.material-page .expert-quote blockquote::after,
.material-page .expert-quote blockquote p::before,
.material-page .expert-quote blockquote p::after,
.material-page .expert-quote figcaption::before,
.material-page .expert-quote figcaption::after {
    content: none !important;
    display: none !important;
    border: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Drop italic — italic over flere linjer er svært læseligt. Non-italic
   Georgia bevarer editorial-feel med bedre læsbarhed. Samme fix som
   testimonial-quote. */
.material-page .expert-quote blockquote p {
    font-family: Georgia, 'Cambria', 'Times New Roman', serif;
    font-size: 1.05em;
    line-height: 1.65;
    color: var(--ecco-text-dark);
    margin: 0;
}

.material-page .expert-attribution {
    display: inline-flex;
    align-items: center;
    gap: var(--s-3);
    text-align: left;
}

.material-page .expert-quote .expert-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--ecco-accent) 0%, var(--ecco-accent-dark) 100%);
    color: var(--ecco-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 1em;
    letter-spacing: 0.02em;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(173, 130, 94, 0.25);
}

.material-page .expert-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.material-page .expert-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.95em;
    color: var(--ecco-primary);
}

.material-page .expert-role {
    font-size: 0.82em;
    color: var(--ecco-text);
    letter-spacing: 0.02em;
}

/* Forside dual CTAs (Ring / Skriv) — visual hierarchy */
.material-page .forside-ctas {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    flex-wrap: wrap;
    margin-top: var(--s-4);
}

/* Forside secondary CTA inverts for dark background */
.material-page > .forside .cta-button-secondary {
    background: transparent;
    color: var(--ecco-white);
    border-color: var(--ecco-white);
}

.material-page > .forside .cta-button-secondary:hover {
    background: var(--ecco-white);
    color: var(--ecco-primary);
    border-color: var(--ecco-white);
}

/* Service-dual section (Filtjek + Levering) — 2 equal cards with secondary CTAs */
.material-page > .material-section.service-dual {
    padding: 30px;
}

.material-page > .material-section.service-dual > .row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin: 0;
}

.material-page > .material-section.service-dual > .row > .col-md-6 {
    padding: 0;
    border-left: 3px solid var(--ecco-accent);
    padding-left: 20px;
}

.material-page > .material-section.service-dual > .row > .col-md-6:first-child {
    border-left-color: var(--ecco-primary);
}

.material-page > .material-section.service-dual h3 {
    font-size: 1.2em;
    margin-bottom: 0.5em;
}

.material-page > .material-section.service-dual p {
    margin-bottom: 1em;
}

/* FAQ first-open: visual indicator */
.material-page .faq-item[open] > summary {
    padding-bottom: 0.5em;
}

/* ==============================================================
   15. Stats section — "Hvorfor vælge os" as number cards
   ============================================================== */

.material-page > .stats-section {
    background: var(--ecco-white);
    border-radius: 10px;
    box-shadow: var(--ecco-shadow-sm);
    padding: 30px;
    margin-bottom: 30px;
    text-align: center;
}

.material-page > .stats-section > h2 {
    text-align: center;
    margin-bottom: 0.4em;
}

.material-page > .stats-section > .section-intro {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    margin-bottom: var(--s-10);
}

.material-page .stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-4);
    margin: 0 0 var(--s-10);
    align-items: stretch;
}

/* Stat cards — belong to paired-rhythm family (icon in accent circle at top,
   matching feature-cards + industry-cards language). Number is the hero. */
.material-page .stat-card {
    background: var(--ecco-white);
    border-radius: 10px;
    padding: var(--s-8) var(--s-5) var(--s-6);
    text-align: center;
    box-shadow: var(--ecco-shadow-sm);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Icon-in-accent-circle at top — Unicode from data-icon attribute */
.material-page .stat-card::before {
    content: attr(data-icon);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--ecco-accent);
    color: var(--ecco-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    line-height: 1;
    margin: 0 auto var(--s-4);
    transition: background 0.3s ease, transform 0.3s ease;
    flex-shrink: 0;
}

.material-page .stat-card[data-icon=""]::before,
.material-page .stat-card:not([data-icon])::before {
    display: none;
}

/* Unified hover: lift -4px + shadow deepens + icon circle bg intensifies */
.material-page .stat-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--ecco-shadow);
}

.material-page .stat-card:hover::before {
    background: var(--ecco-accent-dark);
    transform: scale(1.05);
}

/* Kill old data-icon ::after at bottom (icon now at top via ::before) */
.material-page .stat-card::after {
    content: none;
    display: none;
}

.material-page .stat-number {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-size: 2.4em;
    font-weight: 700;
    line-height: 1;
    color: var(--ecco-primary);
    margin-bottom: var(--s-2);
    letter-spacing: -0.015em;
    font-variant-numeric: tabular-nums;
    min-height: 1.2em;
    text-align: center;
}

.material-page .stat-label {
    display: block;
    font-size: 0.78em;
    font-weight: 600;
    color: var(--ecco-accent-dark);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--s-3);
}

.material-page .stat-card p {
    font-size: 0.88em;
    line-height: 1.5;
    color: var(--ecco-text);
    margin: 0 auto;
    flex-grow: 1;
    max-width: 24ch;
}

.material-page .section-cta {
    text-align: center;
    margin-top: 8px;
}

/* ==============================================================
   15.5 Image-duo — 2-col visual break between Stats and FAQ
   ============================================================== */

.material-page .image-duo {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: var(--s-8);
    margin: var(--s-14) 0 var(--s-14);
    padding: 0;
    border-radius: 10px;
    background: transparent;
    width: 100%;
    max-width: 100%;
}

.material-page .image-duo > .image-duo-item {
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    border-radius: 10px;
    background: var(--ecco-light-bg);
    aspect-ratio: 4 / 3;
    position: relative;
    box-shadow: var(--ecco-shadow-sm);
    width: 100%;
    display: block;
}

.material-page .image-duo-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.6s ease;
    max-width: none;
}

.material-page .image-duo-item:hover img {
    transform: scale(1.03);
}

/* ==============================================================
   16. Mobile adjustments for new components
   ============================================================== */

@media (max-width: 900px) {
    .material-page > header.material-header.hero-split {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
        gap: 24px;
        text-align: left;
        padding: 28px 24px;
    }

    .material-page .hero-content {
        grid-column: 1;
        grid-row: 2;
    }

    .material-page .hero-image {
        grid-column: 1;
        grid-row: 1;
    }

    .material-page .trust-bar {
        grid-column: 1;
        grid-row: 3;
    }

    .material-page .hero-content h1 {
        font-size: 2.2em;
    }

    .material-page > .feature-cards {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .material-page .image-duo {
        grid-template-columns: 1fr !important;
        gap: var(--s-3);
    }

    .material-page .material-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .material-page .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .material-page > .material-section.service-dual > .row {
        grid-template-columns: 1fr;
    }

    .material-page .expert-sidenote {
        grid-template-columns: 48px 1fr;
        gap: 12px;
        padding: 16px 20px;
    }

    .material-page .expert-avatar {
        width: 48px;
        height: 48px;
        font-size: 1em;
    }

    .material-page .trust-bar li {
        font-size: 0.88em;
        padding: 0 8px;
        gap: 10px;
    }

    .material-page .trust-bar li::before {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 480px) {
    .material-page .hero-ctas {
        flex-direction: column;
        width: 100%;
        gap: 10px;
    }

    .material-page .hero-ctas .cta-button-cms,
    .material-page .hero-ctas .cta-button-secondary {
        width: 100%;
    }

    /* Hero-content h1 skalerer IKKE via `.material-header > h1`-reglen i 768,
       fordi h1 er nested inde i .hero-content (grandchild, ikke direct child).
       Eksplicit override for hero-content h1 på smal mobil. */
    .material-page .hero-content h1 {
        font-size: 1.75em;
    }

    .material-page .hero-lead {
        font-size: 1em;
    }

    .material-page > header.material-header.hero-split {
        padding: var(--s-6) var(--s-4);
        gap: var(--s-4);
    }

    .material-page .material-grid {
        grid-template-columns: 1fr;
    }

    .material-page .stats-grid {
        grid-template-columns: 1fr;
    }
}

/* ==============================================================
   17. Testimonials — customer review cards (CMS block)
   ============================================================== */

.material-page > .testimonials-section > .section-header {
    text-align: center;
    margin-bottom: var(--s-8);
}

.material-page > .testimonials-section > .section-header h2 {
    margin-bottom: var(--s-4);
    padding-bottom: var(--s-4);
    position: relative;
    display: inline-block;
    font-size: 1.75em;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
}

.material-page > .testimonials-section > .section-header h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 48px;
    height: 3px;
    background: var(--ecco-accent);
    border-radius: 2px;
}

.material-page > .testimonials-section > .section-header > .section-intro {
    max-width: 640px;
    margin: 0 auto;
    color: var(--ecco-text);
    font-size: 1em;
    line-height: 1.6;
}

.material-page .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-6);
}

.material-page .testimonial {
    background: var(--ecco-light-bg);
    border-radius: 10px;
    padding: var(--s-6);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    border: 1px solid transparent;
}

/* Unified hover: lift + shadow + bg lys-grå → white (matches industry cards) */
.material-page .testimonial:hover {
    transform: translateY(-4px);
    box-shadow: var(--ecco-shadow);
    background: var(--ecco-white);
    border-color: var(--ecco-border);
}

.material-page .testimonial-header {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    margin-bottom: var(--s-4);
}

/* Avatar fallback — hold rules for evt. fremtidig brug uden logo. */
.material-page .testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Logo-plate: subtil hvid baggrund — ikke card-in-card-chrome (ingen
   shadow/border) men en "logo-plate" som visuel equalizer. Hvert PNG har
   forskellig content-density inde i sit canvas (Polar Seafood tæt-pakket
   med bjørnecirkel + wordmark stablet vertikalt, Lehnsgaard kompakt,
   Unidrain meget tyndt). 100px højde + 8px padding giver Polar Seafood
   plads til både bjørnecirkel og wordmark uden klipning; Lehnsgaard og
   Unidrain "flyder" i hvidt rum, hvilket æstetisk fungerer i editorial
   B2B-context som "logo strip". overflow:hidden er sikkerhedsnet. */
.material-page .testimonials-grid .testimonial-logo {
    width: 130px !important;
    height: 100px !important;
    background: var(--ecco-white) !important;
    border: none !important;
    border-radius: 4px !important;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px !important;
    margin-right: 0 !important;
    box-sizing: border-box;
    overflow: hidden;
}

.material-page .testimonials-grid .testimonial-logo img {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: block;
    /* Tonet rendering: grayscale + opacity 0.7 skaber visuel enhed mellem
       Polar Seafood (full-color blå+hvid bjørn) og Lehnsgaard/Unidrain
       (allerede monokrom). Opacity dæmper sort tekst i wordmarks (fx
       "POLAR SEAFOOD") så hele logoet får ensartet greyish tone. Hover-
       reveal til fuld farve er delight-moment + bevarer brand-recognition. */
    filter: grayscale(100%) opacity(0.7);
    transition: filter 0.4s ease;
}

.material-page .testimonial:hover .testimonial-logo img {
    filter: grayscale(0%) opacity(1);
}

/* Fallback: accent-gradient circle with initials when no logo */
.material-page .testimonial-avatar {
    background: linear-gradient(135deg, var(--ecco-accent) 0%, var(--ecco-accent-dark) 100%);
    color: var(--ecco-white);
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 0.95em;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 6px rgba(173, 130, 94, 0.25);
}

.material-page .testimonial-avatar::before {
    content: attr(data-initials);
}

.material-page .testimonial-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    min-width: 0;
}

.material-page .testimonial-name {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 0.95em;
    color: var(--ecco-primary);
}

.material-page .testimonial-company {
    font-size: 0.82em;
    color: var(--ecco-text);
}

/* Eksplicit !important + border-* per side fordi theme har flere
   blockquote-defaults der forsøger at sætte border-left/-top med ID/class-
   specificity. Også overstyr theme's text-align: center, font-size: 26px,
   margin: 60px auto, max-width: 80% defaults. */
.material-page .testimonial-quote {
    margin: 0 !important;
    padding: var(--s-6) 0 0 0 !important;
    border: none !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    flex-grow: 1;
    position: relative;
    text-align: left !important;
    max-width: none !important;
    font-family: inherit !important;
    font-size: inherit !important;
    font-style: normal !important;
    color: inherit !important;
}

/* Dekorativ åbne-quote-mark: stort Georgia ", accent-brun, lav opacity.
   Sidder absolut i top-venstre af quote-zonen som typografisk anker —
   editorial-pattern fra magasin-layouts. 5em giver mere typografisk
   confidence end den 4em-version der så "shy" ud.

   KRITISK: Theme har en blockquote::before rule der sætter:
     content:''; width:80px; height:3px; background:#ffe51e; margin:0 auto 60px
   ...som lækker ind i VORES ::before fordi vi ikke overrider de properties.
   Resultat: gul (eller desaturerede grå) horisontal linje under vores ".
   Eksplicit override af background/width/height/margin/display er nødvendig
   for at neutralisere theme-rule'en. */
.material-page .testimonial-quote::before {
    content: "\201C" !important;
    position: absolute;
    top: -0.2em;
    left: -0.4em;
    font-family: Georgia, 'Cambria', 'Times New Roman', serif;
    font-size: 5em;
    line-height: 1;
    color: var(--ecco-accent);
    opacity: 0.35;
    pointer-events: none;
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    display: inline-block !important;
    transform-origin: left top;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Hover: " bumper opacity + subtil scale-up som delight-moment.
   Synkroniseret med kort-lift (-4px), shadow-fordybning og logo-color-reveal.
   transform-origin: left top sikrer skaleringen ikke brækker hangende
   position. */
.material-page .testimonial:hover .testimonial-quote::before {
    opacity: 0.55;
    transform: scale(1.05);
}

/* Kill theme default blockquote decorations på ::after og p::before/::after.
   .testimonial-quote::before er bevidst udeladt — vi bruger den til den
   dekorative åbne-quote-mark (se længere nede). */
.material-page .testimonial-quote::after,
.material-page .testimonial-quote p::before,
.material-page .testimonial-quote p::after {
    content: none !important;
    display: none !important;
    border: none !important;
    background: none !important;
    width: 0 !important;
    height: 0 !important;
}

/* Quote-typografi: Georgia non-italic — matcher expert-quote-stil.
   Venstre-justeret giver øjet anker-edge. 1.1em body-tekst kompenserer
   for Georgia's lille x-height (Georgia ved 1em læser ~0.85em sammen-
   lignet med Poppins) — giver tæt-på optisk parity med omgivende sans-
   serif uden at presse hierarkiet (1.15em ville begynde dominere kortet).
   Line-height 1.55 holder tight kort-feel. text-wrap: pretty undgår
   orphan-ord på sidste linje (moderne CSS, falder tilbage til normal). */
.material-page .testimonial-quote p {
    font-family: Georgia, 'Cambria', 'Times New Roman', serif;
    font-size: 1.1em;
    line-height: 1.55;
    color: var(--ecco-text-dark);
    margin: 0;
    max-width: none;
    text-align: left;
    text-wrap: pretty;
    position: relative;
}

/* 5 stjerner som kvalitetsmarkør — accent-brun matcher brand-paletten
   i stedet for traditional gold (mere refined B2B-tone). Sidder nu inline
   som tredje linje i .testimonial-meta (under firmanavn) i stedet for at
   tage egen visuel række — undgår "trust theater" hvor 4 credibility-
   signals (logo+navn+firma+stjerner) konkurrerer om opmærksomhed. */
.material-page .testimonial-stars {
    color: var(--ecco-accent);
    font-size: 0.7em;
    letter-spacing: 0.12em;
    line-height: 1;
    margin-top: 2px;
}

/* Tablet — iPad begge orienteringer: 2-col (3-col klemmer for meget) */
@media (max-width: 1024px) {
    .material-page .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--s-5);
    }
}

/* Mobile — egentlig telefon: 1-col stack */
@media (max-width: 768px) {
    .material-page .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

/* ==============================================================
   18. Stepper block call-to-action polish (CMS block)
   ============================================================== */

.material-page > .material-section.dark-background > .call-to-action {
    text-align: center;
    margin-top: var(--s-8);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-3);
}

.material-page > .material-section.dark-background > .call-to-action .secondary-link {
    margin: 0;
    font-size: 0.95em;
}

.material-page > .material-section.dark-background > .call-to-action .secondary-link a {
    color: var(--ecco-accent-dark);
    text-decoration: underline;
    text-decoration-color: var(--ecco-accent);
    text-underline-offset: 3px;
    font-weight: 600;
    transition: color 0.2s ease;
}

.material-page > .material-section.dark-background > .call-to-action .secondary-link a:hover {
    color: var(--ecco-accent-hover);
}

/* ==============================================================
   19. Mobile padding overrides — for sektioner defineret senere i filen
   (stats, industry, testimonials — deres base-padding er defineret AFTER
   section 13's media queries, så overrides skal placeres her for at vinde
   cascaden uden specificity tricks)
   ============================================================== */

@media (max-width: 768px) {
    .material-page > .stats-section,
    .material-page > .industry-section,
    .material-page > .testimonials-section {
        padding: var(--s-8) var(--s-5);
    }

    /* Stats-section har også margin-bottom: 30px — reducér */
    .material-page > .stats-section {
        margin-bottom: var(--s-6);
    }
}

@media (max-width: 480px) {
    .material-page > .stats-section,
    .material-page > .industry-section,
    .material-page > .testimonials-section {
        padding: var(--s-6) var(--s-4);
    }
}

/* ==============================================================
   20. Trust-bar mobile — stack vertikalt på smal mobil
   ============================================================== */

@media (max-width: 480px) {
    .material-page .trust-bar {
        grid-template-columns: 1fr;
        gap: var(--s-3);
        padding-top: var(--s-4);
        margin-top: var(--s-5);
    }

    /* Horisontale separators skifter til øvre border på stacked items */
    .material-page .trust-bar li + li {
        border-left: none;
        border-top: 1px solid var(--ecco-border);
        padding-top: var(--s-3);
    }

    .material-page .trust-bar li {
        padding: 0;
        justify-content: flex-start;
    }
}

/* ==============================================================
   21. iPad-specifik polish — stats-grid 3-col (i stedet for squeezed 5-col)
   mellem 769-1024px (iPad landscape/portrait edge)
   ============================================================== */

@media (max-width: 1024px) and (min-width: 769px) {
    .material-page .stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==============================================================
   22. Stepper content-cards skjules på tablet (≤1024)
   5-col content-grid klemmer hver kort ned til ~124px usable bredde på
   iPad — uses-læseligt. Content duplikerer step-labels uden ekstra værdi,
   så vi skjuler dem helt på tablet (kun desktop beholder det supplerende
   content-grid). Mobile-skjul er allerede håndteret i 768-blokken men
   redundant !important her fanger alle cascade-scenarios.
   ============================================================== */

@media (max-width: 1024px) {
    .material-page #progress-content-section {
        display: none !important;
    }
}

/* ==============================================================
   23. Forside-specific component variants
   ============================================================== */

/* 3-col feature-cards — bruges på forsiden (vs. 2-col på landing-pages).
   Top-margin tilføjet fordi forsidens Revslider-hero ikke har bottom-margin
   som .material-header — uden dette sidder kortene klistret op ad videoen. */
.material-page .feature-cards.feature-cards-3col {
    grid-template-columns: repeat(3, 1fr) !important;
    margin-top: var(--s-12);
}

/* 4-col industry-grid — bruges på forsidens discovery-grid (rulle/logo/materialer/filtjek)
   vs. landing-sidernes 3-col eller 5-col varianter */
.material-page .industry-grid.industry-grid-four {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--s-5);
}

@media (max-width: 1024px) {
    .material-page .industry-grid.industry-grid-four {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .material-page .industry-grid.industry-grid-four {
        grid-template-columns: 1fr;
    }
}

/* Stats sektion lys-grå variant — bruges på forsiden for at skabe blød
   farve-bro ind til den mørke ansvarlige-sektion. Kort i sektionen
   forbliver hvide for kontrast. */
.material-page > .stats-section.stats-section-subtle {
    background: var(--ecco-light-bg);
}

/* 4-col stats grid (vs. landing-sidernes 5-col).
   Bruger descendant combinator for konsistens med eksisterende
   .material-page .stats-grid base-rule. */
.material-page .stats-grid.stats-grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

/* iPad-specifik (769-1024): 2+2 i stedet for 3+1-orphan layout */
@media (max-width: 1024px) and (min-width: 769px) {
    .material-page .stats-grid.stats-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* .stats-grid-4 mobile overrides (specificity 0,3,0 silently outscores
   base .stats-grid mobile rules at 0,2,0 — så vi skal eksplicit gentage
   dem her, mirror af .industry-grid-four pattern i samme section). */
@media (max-width: 900px) {
    .material-page .stats-grid.stats-grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .material-page .stats-grid.stats-grid-4 {
        grid-template-columns: 1fr;
    }
}

/* ==============================================================
   24. Ansvarlige etiketter — fullwidth dark mood-section
   Erstatter Forside.html's inline CSS (~60 linjer hardcoded px).
   Token-baseret version med ::before overlay + flexbox centering.
   ============================================================== */

.material-page .responsible-labels-section {
    position: relative;
    padding: var(--s-20) var(--s-10);
    text-align: center;
    color: var(--ecco-white);
    background: url("/media/wysiwyg/responsible-labels-bg.jpeg") no-repeat center bottom / cover;
    border-radius: 10px;
    box-shadow: var(--ecco-shadow-sm);
    overflow: hidden;
    margin-bottom: var(--s-10);
    min-height: 620px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.material-page .responsible-labels-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(52, 58, 76, 0.35) 0%,
        rgba(52, 58, 76, 0.65) 60%,
        rgba(52, 58, 76, 0.80) 100%);
    z-index: 1;
}

.material-page .responsible-labels-section > * {
    position: relative;
    z-index: 2;
    max-width: 600px;
}

.material-page .responsible-labels-section h2 {
    color: var(--ecco-white);
    margin-bottom: var(--s-4);
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

/* Body på image-baggrund kræver ekstra weight + size + stærkere shadow.
   400 weight + 1em + opacity 0.95 svinder ind i den travle baggrund selv
   med 75% overlay. Opskriften: 1.15em (hero-scale), weight 500, opacity 1
   (pure white), stronger shadow. Linje-længde reduceret via max-width 600px
   på parent så teksten ikke krydser flere image-zones. */
.material-page .responsible-labels-section p {
    color: var(--ecco-white);
    margin-bottom: var(--s-8);
    opacity: 1;
    font-size: 1.15em;
    font-weight: 500;
    line-height: 1.6;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.55);
}

/* Semi-transparent hvid border på CTA løfter knappen mod den dæmpede
   baggrund uden at stikke ud — 40% opacity holder den i mood-paletten. */
.material-page .responsible-labels-section .cta-button-cms {
    border-color: rgba(255, 255, 255, 0.4);
}

/* Inline-emphasis på nøgleord (FSC®, 30% genbrug) — bold weight giver
   visuel vægt uden at konkurrere med den brun-accent CTA om opmærksomhed.
   Ren editorial-tilgang: weight er emphasis, ikke farve. */
.material-page .responsible-labels-section p strong {
    color: var(--ecco-white);
    font-weight: 700;
}

@media (max-width: 768px) {
    .material-page .responsible-labels-section {
        padding: var(--s-12) var(--s-6);
        min-height: 480px;
    }
}

/* ==============================================================
   Blog-univers section wrapper — Magento widget block_id=29
   Wrapperen sikrer card-chrome (border-radius, shadow, hover)
   matcher landing-systemet. Selectors targets både .blog-card
   og <article> som fallback for widget-genereret markup.
   ============================================================== */

.material-page > .blog-univers-section {
    background: var(--ecco-white);
    border-radius: 10px;
    box-shadow: var(--ecco-shadow-sm);
    padding: var(--s-10);
    margin-bottom: var(--s-10);
    text-align: center;
}

.material-page > .blog-univers-section h2 {
    margin-bottom: var(--s-4);
    position: relative;
    display: inline-block;
    padding-bottom: var(--s-4);
    font-size: 1.75em;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.01em;
    text-align: center;
}

.material-page > .blog-univers-section .blog-univers-inner {
    text-align: center;
}

.material-page > .blog-univers-section h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 48px;
    height: 3px;
    background: var(--ecco-accent);
    border-radius: 2px;
}

/* Section intro paragraph */
.material-page > .blog-univers-section .section-intro {
    max-width: 640px;
    margin: 0 auto var(--s-8);
    color: var(--ecco-text);
    font-size: 1em;
    line-height: 1.6;
}

/* Magefan widget grid override: 3-col symmetric (var auto-fit) */
.material-page > .blog-univers-section .post-list {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: var(--s-6) !important;
    text-align: left;
}

/* Card chrome — overrider widget overlay-style. Modern card med billede
   øverst og titel under. Cinematic feel bevares ved at lade billedet
   fylde 4:3 area dominant. */
.material-page > .blog-univers-section article.post-holder {
    background: var(--ecco-white) !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    box-shadow: var(--ecco-shadow-sm) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    display: flex !important;
    flex-direction: column !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    /* Override legacy style-l.css flex sizing + min-height — articles
       caps på 33%-30px og 600px min-height som tvinger cards unødvendigt
       høje. Reset til fuld cell-bredde og natural content-højde. */
    flex: 1 1 auto !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
}

.material-page > .blog-univers-section article.post-holder:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--ecco-shadow) !important;
}

/* Override legacy align-items: flex-end på post-holder. Cross-axis
   flex-end skubber post-content til højre når titlen er kort (kun
   tredje kort "Et godt labeldesign"). Stretch sikrer alle children
   fylder kortets fulde bredde uanset content-længde. */
.material-page > .blog-univers-section article.post-holder {
    align-items: stretch !important;
}

.material-page > .blog-univers-section .post-content {
    width: 100% !important;
    align-self: stretch !important;
}

/* === Hele blog-kortet klikbart ===
   Lader titel-link vokse via ::before-overlay til at dække hele kortet.
   Bevarer semantik (linket forbliver omkring titlen for SEO/screen-readers).
   Specificity boosted med .post-holder.post-holder for at vinde over
   eksisterende position: static på article. */
main.material-page > section.blog-univers-section article.post-holder.post-holder {
    position: relative !important;
    cursor: pointer;
}

main.material-page > section.blog-univers-section h2.post-title {
    position: static !important;
}

main.material-page > section.blog-univers-section .post-content {
    will-change: auto !important;
}

main.material-page > section.blog-univers-section .post-item-link::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 5;
}

main.material-page > section.blog-univers-section .post-item-link::after {
    position: relative;
    z-index: 6;
}

/* Image wrapper: 1:1 square aspect via padding-bottom-trick (mere robust
   end aspect-ratio mod legacy CSS-overrides). Square giver dominant
   visuel presence der bevarer "cinematic" feel uden at cropp e for meget
   af de vertikale produktfotos. */
.material-page > .blog-univers-section .post-image-wrapper {
    width: 100% !important;
    height: 0 !important;
    padding-bottom: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
    position: relative !important;
    background: var(--ecco-light-bg) !important;
    margin: 0 !important;
    padding-top: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: block !important;
}

.material-page > .blog-univers-section .post-image-wrapper picture {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.material-page > .blog-univers-section .post-image-wrapper img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.5s ease !important;
    display: block !important;
}

.material-page > .blog-univers-section article.post-holder:hover .post-image-wrapper img {
    transform: scale(1.04) !important;
}

/* Skjul gradient-overlay — ikke længere nødvendig (tekst flyttet væk fra billede) */
.material-page > .blog-univers-section .gradient-overlay {
    display: none !important;
}

/* Content area below image. Override Magefan overlay-stilens
   transform: translateY(52px) som er designet til glide-op-animation
   når titlen overlay'er billedet — i vores below-image layout skubber
   den titlen ned i bunden hvor overflow:hidden klipper den væk. */
.material-page > .blog-univers-section .post-content {
    position: static !important;
    padding: var(--s-5) !important;
    background: transparent !important;
    color: inherit !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: left !important;
    transform: none !important;
}

.material-page > .blog-univers-section article.post-holder:hover .post-content {
    transform: none !important;
}

/* Skjul accent-stripe over titlen og h2::after-arvet underline under
   titlen (h2::after-reglen for sektionens H2 cascadede ned til
   .post-title h2). Begge linjer = visuel støj. Pilen alene er
   tilstrækkelig affordance. */
.material-page > .blog-univers-section .post-content::before {
    display: none !important;
}

.material-page > .blog-univers-section article.post-holder h2::after {
    display: none !important;
    content: none !important;
}

/* Titel: Poppins navy + accent "→" pil — matcher Find-section pattern */
.material-page > .blog-univers-section .post-title {
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Poppins', sans-serif !important;
    font-size: 1.05em !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: var(--ecco-primary) !important;
    text-align: left !important;
    letter-spacing: -0.005em !important;
}

.material-page > .blog-univers-section .post-item-link,
.material-page > .blog-univers-section .post-item-link:hover,
.material-page > .blog-univers-section .post-item-link:focus,
.material-page > .blog-univers-section .post-item-link:visited {
    color: var(--ecco-primary) !important;
    text-decoration: none !important;
    background: transparent !important;
    border-bottom: none !important;
    border: none !important;
    display: block !important;
    transition: color 0.3s ease !important;
}

/* "→" affordance-pil inline efter titel */
.material-page > .blog-univers-section .post-item-link::after {
    content: '→';
    color: var(--ecco-accent) !important;
    font-weight: 400;
    margin-left: 0.4em;
    display: inline-block;
    transition: transform 0.3s ease;
}

.material-page > .blog-univers-section article.post-holder:hover .post-item-link::after {
    transform: translateX(4px);
}

/* Skjul tomme post-links og post-meta wrappers */
.material-page > .blog-univers-section .post-links,
.material-page > .blog-univers-section .post-meta,
.material-page > .blog-univers-section .post-image-wrapper.post-image-cover::before,
.material-page > .blog-univers-section .post-image-wrapper.post-image-cover::after {
    display: none !important;
}

/* Container reset (Magefan widget wraps in div.container med inline padding) */
.material-page > .blog-univers-section .container {
    padding: 0 !important;
    max-width: none !important;
}

@media (max-width: 900px) {
    .material-page > .blog-univers-section .post-list {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 768px) {
    .material-page > .blog-univers-section {
        padding: var(--s-6);
    }
}

/* ==============================================================
   25. Discovery-grid link-reset — <a class="industry-card">
   Forside.html section 8 bruger <a class="industry-card" href="...">
   i stedet for <article>. Link-reset sikrer at card-content (h3, p)
   arver tekstfarbe fra parent og ikke browserens default underlined-blue
   link styling. Hover-lift fra eksisterende .industry-card:hover fyrer
   stadig pga pseudo-class chaining.
   ============================================================== */

.material-page a.industry-card,
.material-page a.industry-card:hover,
.material-page a.industry-card:focus,
.material-page a.industry-card:visited {
    color: inherit;
    text-decoration: none;
}

/* ==============================================================
   25. Forside CTA centered variant
   ============================================================== */

/* Single-column centreret variant af .forside — bruges på forsidens
   final CTA hvor primær CTA skal dominere og kontakt-info bliver
   subtil sub-line. Erstatter 50/50 col-md-6-pattern. */
.material-page > .forside.forside-centered {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--s-12) var(--s-10);
    gap: 0;
}

/* Full-bleed kontakt-billede i toppen af CTA — bryder ud af sektionens
   padding via negative margins og runder kun øverste hjørner.
   align-self: stretch overrider parent's align-items: center så banneret
   fylder sektionens fulde indvendige bredde før negative margins træder ind. */
.material-page > .forside.forside-centered > .forside-banner {
    align-self: stretch;
    margin: calc(var(--s-12) * -1) calc(var(--s-10) * -1) var(--s-10);
    aspect-ratio: 16 / 5;
    overflow: hidden;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    position: relative;
}

/* Warm-tone filter på kontakt-billedet: kølige greys + orange-rødt hår
   passer ikke til vores cream/copper-palette. Filter dæmper saturation
   (muter orange-rødt), tilføjer sepia-warm-wash, slight darkening matcher
   mood mod navy-panel. Justerede værdier: saturate(0.7) er nok til at
   neutralisere orange uden at gå sort/hvid; sepia(0.3) giver tydelig warm
   tint uden at billedet ser browntoned/instagram-filteret ud. */
.material-page > .forside.forside-centered > .forside-banner img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 30%;
    margin: 0;
    filter: saturate(0.7) sepia(0.3) brightness(0.96) contrast(1.05);
}

/* Subtil accent-brun gradient overlay knytter banneret æstetisk til
   navy-panel under: blød warm-wash i top fader til transparent mid,
   navy-tone i bund matcher panel-overgangen. Holder overlay lav (12%
   peak) så billedets indhold stadig læser klart. */
.material-page > .forside.forside-centered > .forside-banner::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(173, 130, 94, 0.12) 0%,
        rgba(173, 130, 94, 0.05) 40%,
        rgba(52, 58, 76, 0.08) 100%);
    pointer-events: none;
    z-index: 1;
}

.material-page > .forside.forside-centered > h2,
.material-page > .forside.forside-centered > h3 {
    max-width: 720px;
    margin: 0 0 var(--s-3);
    font-size: clamp(1.6em, 3vw, 2.2em);
    line-height: 1.2;
    text-align: center;
}

.material-page > .forside.forside-centered > .forside-lead {
    max-width: 560px;
    margin: 0 0 var(--s-8);
    font-size: 1.05em;
    line-height: 1.6;
    opacity: 0.92;
    text-align: center;
}

.material-page > .forside.forside-centered > .cta-button-cms {
    margin: 0 0 var(--s-8);
}

.material-page > .forside.forside-centered > .forside-contact-line {
    max-width: 720px;
    margin: 0;
    font-size: 0.95em;
    line-height: 1.6;
    opacity: 0.88;
    text-align: center;
}

.material-page > .forside.forside-centered > .forside-contact-line a {
    color: var(--ecco-white);
    text-decoration: underline;
    text-decoration-color: var(--ecco-accent);
    text-underline-offset: 3px;
}

.material-page > .forside.forside-centered > .forside-contact-line a:hover {
    text-decoration-color: var(--ecco-white);
}

.material-page > .forside.forside-centered > .forside-contact-line .sep {
    margin: 0 0.6em;
    color: var(--ecco-accent);
    opacity: 0.6;
}

/* Telefonnummer fremhævet som primær kontakt-CTA — ikon + bold giver
   visuel vægt over email/chat uden at bryde inline-flow. */
.material-page > .forside.forside-centered > .forside-contact-line .forside-phone {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    font-weight: 600;
}

.material-page > .forside.forside-centered > .forside-contact-line .forside-phone svg {
    width: 20px;
    height: 20px;
    display: inline-block;
    flex-shrink: 0;
    stroke: var(--ecco-accent);
}

@media (max-width: 768px) {
    .material-page > .forside.forside-centered {
        padding: var(--s-10) var(--s-6);
    }

    .material-page > .forside.forside-centered > .forside-banner {
        margin: calc(var(--s-10) * -1) calc(var(--s-6) * -1) var(--s-8);
        aspect-ratio: 16 / 7;
    }

    .material-page > .forside.forside-centered > .forside-contact-line .sep {
        display: block;
        margin: var(--s-2) 0;
        font-size: 0.5em;
    }
}

/* ==============================================================
   26. Forside refinements — frontend-design review fixes
   ============================================================== */

/* 1. Stats H2 accent underline (matches industry/blog/why-choose pattern) */
.material-page > .stats-section > h2 {
    position: relative;
    display: inline-block;
    padding-bottom: var(--s-4);
    text-align: center;
}

.material-page > .stats-section > h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 48px;
    height: 3px;
    background: var(--ecco-accent);
    border-radius: 2px;
}

.material-page > .stats-section {
    text-align: center;
}

/* Breathing room mellem H2 (med underline) og stats-grid når der ikke er
   .section-intro imellem — undgår at kort presses op mod titlen. */
.material-page > .stats-section > h2 + .stats-grid {
    margin-top: var(--s-8);
}

/* 2. Feature-cards 3-col → 2-col → 1-col cascade (no hard 900 jump) */
@media (max-width: 900px) {
    .material-page .feature-cards.feature-cards-3col {
        grid-template-columns: 1fr !important;
        margin-top: var(--s-10);
    }
}

/* 3. Discovery industry-section får lys-grå baggrund (variant af stats-section-subtle pattern) */
.material-page > .industry-section.industry-section-subtle {
    background: var(--ecco-light-bg);
}

/* "→" affordance-pil på hover for cards i Find-sektionen — signalerer
   at kortene linker videre. Scoped til .industry-section-subtle så det
   kun rammer Find (Brancher har egne photo-cards med scale-zoom hover). */
.material-page .industry-section-subtle .industry-card {
    position: relative;
}

/* "→" affordance-pil inline efter titlen — altid synlig så brugere
   ser klikbarhed ved scan, ikke først ved hover. Translater 4px højre
   på card-hover (samme animation som CTA). Klassisk B2B-link-pattern. */
.material-page .industry-section-subtle .industry-card h3::after {
    content: '→';
    color: var(--ecco-accent) !important;
    font-weight: 400;
    margin-left: 0.4em;
    display: inline-block;
    transition: transform 0.3s ease;
}

.material-page .industry-section-subtle .industry-card:hover h3::after {
    transform: translateX(4px);
}

/* 4. Sektion 3 CTA margin-top (eye-leading whitespace før konvertering) */
.material-page > .why-choose-stickers > div > .cta-button-cms {
    margin-top: var(--s-6);
}

/* 5. Ansvarlige overlay — diamond gradient (mørkest i midten, billede synligt
   top + bund). Peak bumped 75% → 82% for stærkere body-kontrast: tekst sidder
   i midten hvor 82% navy-overlay er konstant baggrund. Edges holdes på 45%
   så image-atmosfære (planter, flasker) bevares. */
.material-page .responsible-labels-section::before {
    background: linear-gradient(180deg,
        rgba(52, 58, 76, 0.45) 0%,
        rgba(52, 58, 76, 0.82) 40%,
        rgba(52, 58, 76, 0.82) 60%,
        rgba(52, 58, 76, 0.45) 100%) !important;
}

.material-page .responsible-labels-section {
    min-height: 480px !important;
}

@media (max-width: 768px) {
    .material-page .responsible-labels-section {
        min-height: 400px !important;
    }
}

/* 6. Blog-univers text-align cascade — sikrer card content er left-aligned */
.material-page > .blog-univers-section div,
.material-page > .blog-univers-section p:not(.section-intro):not(:first-of-type),
.material-page > .blog-univers-section h3 {
    text-align: left;
}

/* 7. Contact line · separator opacity → 100% for synlighed på navy */
.material-page > .forside.forside-centered > .forside-contact-line .sep {
    opacity: 1 !important;
}

/* 8. Industry-card image variant (for branche-cards med produktbilleder) */
.material-page .industry-card.industry-card-image {
    padding: 0;
    overflow: hidden;
    background: var(--ecco-light-bg);
}

.material-page .industry-card.industry-card-image .industry-card-image-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--ecco-light-bg);
}

/* Reduce card image-height på mobile (~330px → ~250px ved 480px viewport) */
@media (max-width: 768px) {
    .material-page .industry-card.industry-card-image .industry-card-image-wrap {
        aspect-ratio: 16 / 9;
    }
}

.material-page .industry-card.industry-card-image .industry-card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
    display: block;
}

.material-page .industry-card.industry-card-image:hover .industry-card-image-wrap img {
    transform: scale(1.04);
}

.material-page .industry-card.industry-card-image > h3 {
    padding: var(--s-5) var(--s-5) 0;
    margin-top: 0;
    /* Reserver 2 linjers højde så cards med 1-line ("Husholdning")
       og 2-line ("Pharma & industri") titler aligner ens på tværs.
       2.6em = 2 linjer ved h3 line-height 1.3. */
    min-height: 2.6em;
}

.material-page .industry-card.industry-card-image > p {
    padding: 0 var(--s-5) var(--s-5);
}

/* ==========================================================================
   Phosphor Light ikoner (MIT, phosphoricons.com) – tilføjet 16-09-2026
   Erstatter hjemmetegnede SVG'er og unicode-glyffer (★ ♻ ✓ ✦ ⚡ →).
   ========================================================================== */
.material-page .industry-icon,
.material-page > .feature-cards > .feature-card > .feature-icon { width: 72px; height: 72px; }
.material-page .industry-icon svg,
.material-page > .feature-cards > .feature-card > .feature-icon svg { width: 40px; height: 40px; fill: currentColor; stroke: none; }
.material-page > .forside.forside-centered > .forside-contact-line .forside-phone svg { stroke: none; fill: var(--ecco-accent); }

.material-page .stat-card[data-icon]::before,
.material-page .trust-bar li::before { background-repeat: no-repeat; background-position: center; background-size: 60%; }
.material-page .stat-card[data-icon="medal"]::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M214 96a86 86 0 1 0-140 66.87V240a6 6 0 0 0 2.85 5.1a5.93 5.93 0 0 0 3.15.9a6 6 0 0 0 2.68-.63L128 222.71l45.33 22.66A6 6 0 0 0 182 240v-77.13A85.87 85.87 0 0 0 214 96M54 96a74 74 0 1 1 74 74a74.09 74.09 0 0 1-74-74m116 134.29l-39.33-19.66a6 6 0 0 0-5.36 0L86 230.29V171a85.75 85.75 0 0 0 84 0ZM128 150a54 54 0 1 0-54-54a54.06 54.06 0 0 0 54 54m0-96a42 42 0 1 1-42 42a42 42 0 0 1 42-42'/%3E%3C/svg%3E"); }
.material-page .stat-card[data-icon="leaf"]::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M221.45 40.19a6 6 0 0 0-5.64-5.64C140.43 30.11 80.14 52.71 54.53 95c-17.44 28.79-16.76 62.8 1.79 96.2l-20.56 20.56a6 6 0 1 0 8.48 8.48l20.56-20.56c17.27 9.59 34.7 14.41 51.49 14.41A85.4 85.4 0 0 0 161 201.47c42.29-25.61 64.88-85.9 60.45-161.28m-66.66 151c-24.08 14.58-52.64 14.37-81.13-.39l90.59-90.59a6 6 0 0 0-8.48-8.48l-90.59 90.61c-14.76-28.49-15-57-.39-81.13c22.68-37.43 76.63-57.8 145-54.95c2.8 68.32-17.57 122.28-55 144.95Z'/%3E%3C/svg%3E"); }
.material-page .stat-card[data-icon="truck"]::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='m253.57 117.78l-14-35a13.93 13.93 0 0 0-13-8.8H190V64a6 6 0 0 0-6-6H32a14 14 0 0 0-14 14v112a14 14 0 0 0 14 14h18.6a30 30 0 0 0 58.8 0h53.2a30 30 0 0 0 58.8 0H240a14 14 0 0 0 14-14v-64a6 6 0 0 0-.43-2.22M190 86h36.58a2 2 0 0 1 1.86 1.26l10.7 26.74H190ZM30 72a2 2 0 0 1 2-2h146v68H30Zm50 138a18 18 0 1 1 18-18a18 18 0 0 1-18 18m82.6-24h-53.2a30 30 0 0 0-58.8 0H32a2 2 0 0 1-2-2v-34h148v15.48A30.1 30.1 0 0 0 162.6 186m29.4 24a18 18 0 1 1 18-18a18 18 0 0 1-18 18m50-26a2 2 0 0 1-2 2h-18.6a30.05 30.05 0 0 0-29.4-24c-.67 0-1.34 0-2 .07V126h52Z'/%3E%3C/svg%3E"); }
.material-page .stat-card[data-icon="check"]::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M172.24 99.76a6 6 0 0 1 0 8.48l-56 56a6 6 0 0 1-8.48 0l-24-24a6 6 0 0 1 8.48-8.48L112 151.51l51.76-51.75a6 6 0 0 1 8.48 0M230 128A102 102 0 1 1 128 26a102.12 102.12 0 0 1 102 102m-12 0a90 90 0 1 0-90 90a90.1 90.1 0 0 0 90-90'/%3E%3C/svg%3E"); }
.material-page .stat-card[data-icon="map-pin"]::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M128 66a38 38 0 1 0 38 38a38 38 0 0 0-38-38m0 64a26 26 0 1 1 26-26a26 26 0 0 1-26 26m0-112a86.1 86.1 0 0 0-86 86c0 30.91 14.34 63.74 41.47 94.94a252.3 252.3 0 0 0 41.09 38a6 6 0 0 0 6.88 0a252.3 252.3 0 0 0 41.09-38c27.13-31.2 41.47-64 41.47-94.94a86.1 86.1 0 0 0-86-86m0 206.51C113 212.93 54 163.62 54 104a74 74 0 0 1 148 0c0 59.62-59 108.93-74 120.51'/%3E%3C/svg%3E"); }
.material-page .stat-card[data-icon="clock"]::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M128 26a102 102 0 1 0 102 102A102.12 102.12 0 0 0 128 26m0 192a90 90 0 1 1 90-90a90.1 90.1 0 0 1-90 90m62-90a6 6 0 0 1-6 6h-56a6 6 0 0 1-6-6V72a6 6 0 0 1 12 0v50h50a6 6 0 0 1 6 6'/%3E%3C/svg%3E"); }
.material-page .trust-bar li:nth-child(1)::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M214 96a86 86 0 1 0-140 66.87V240a6 6 0 0 0 2.85 5.1a5.93 5.93 0 0 0 3.15.9a6 6 0 0 0 2.68-.63L128 222.71l45.33 22.66A6 6 0 0 0 182 240v-77.13A85.87 85.87 0 0 0 214 96M54 96a74 74 0 1 1 74 74a74.09 74.09 0 0 1-74-74m116 134.29l-39.33-19.66a6 6 0 0 0-5.36 0L86 230.29V171a85.75 85.75 0 0 0 84 0ZM128 150a54 54 0 1 0-54-54a54.06 54.06 0 0 0 54 54m0-96a42 42 0 1 1-42 42a42 42 0 0 1 42-42'/%3E%3C/svg%3E"); }
.material-page .trust-bar li:nth-child(2)::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M221.45 40.19a6 6 0 0 0-5.64-5.64C140.43 30.11 80.14 52.71 54.53 95c-17.44 28.79-16.76 62.8 1.79 96.2l-20.56 20.56a6 6 0 1 0 8.48 8.48l20.56-20.56c17.27 9.59 34.7 14.41 51.49 14.41A85.4 85.4 0 0 0 161 201.47c42.29-25.61 64.88-85.9 60.45-161.28m-66.66 151c-24.08 14.58-52.64 14.37-81.13-.39l90.59-90.59a6 6 0 0 0-8.48-8.48l-90.59 90.61c-14.76-28.49-15-57-.39-81.13c22.68-37.43 76.63-57.8 145-54.95c2.8 68.32-17.57 122.28-55 144.95Z'/%3E%3C/svg%3E"); }
.material-page .trust-bar li:nth-child(3)::before { content: ""; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='m253.57 117.78l-14-35a13.93 13.93 0 0 0-13-8.8H190V64a6 6 0 0 0-6-6H32a14 14 0 0 0-14 14v112a14 14 0 0 0 14 14h18.6a30 30 0 0 0 58.8 0h53.2a30 30 0 0 0 58.8 0H240a14 14 0 0 0 14-14v-64a6 6 0 0 0-.43-2.22M190 86h36.58a2 2 0 0 1 1.86 1.26l10.7 26.74H190ZM30 72a2 2 0 0 1 2-2h146v68H30Zm50 138a18 18 0 1 1 18-18a18 18 0 0 1-18 18m82.6-24h-53.2a30 30 0 0 0-58.8 0H32a2 2 0 0 1-2-2v-34h148v15.48A30.1 30.1 0 0 0 162.6 186m29.4 24a18 18 0 1 1 18-18a18 18 0 0 1-18 18m50-26a2 2 0 0 1-2 2h-18.6a30.05 30.05 0 0 0-29.4-24c-.67 0-1.34 0-2 .07V126h52Z'/%3E%3C/svg%3E"); }

/* --- Stat-cards layout B (16-09-2026): ikon til venstre, tal + label til højre, tekst under --- */
.material-page .stat-card {
    display: grid;
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 18px;
    align-items: center;
    text-align: left;
    padding: 28px 26px;
}
.material-page .stat-card::before {
    grid-row: 1 / 3;
    width: 64px;
    height: 64px;
    background-size: 58%;
    margin: 0;
}
.material-page .stat-number {
    justify-content: flex-start;
    align-self: end;
    font-size: clamp(1.5em, 2.2vw, 1.9em);
    min-height: 0;
    margin: 0;
    text-align: left;
}
.material-page .stat-label {
    align-self: start;
    font-size: 0.92em;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--ecco-accent-dark);
    margin: 0;
}
.material-page .stat-card p {
    grid-column: 1 / 3;
    margin: 16px 0 0;
    text-align: left;
}
@media (max-width: 480px) {
    .material-page .stat-card { padding: 22px 20px; column-gap: 14px; grid-template-columns: 56px 1fr; }
    .material-page .stat-card::before { width: 56px; height: 56px; }
    .material-page .stat-number { font-size: 1.6em; }
}

/* --- Tilpas-sektion billede v2 (16-09-2026): Magento pakker img i <picture>, saa de gamle
   "> div > img"-regler rammer ikke. Samme udtryk som .image-duo: runde hjoerner, skygge,
   fylder kolonnen, zoom ved hover. Billedet er absolut placeret, saa dets egen stoerrelse
   ikke styrer raekkehoejden (tekstkolonnen bestemmer). Paa mobil: fast 16:10. --- */
.material-page > .why-choose-stickers > div:has(img) {
    display: block;
    position: relative;
    align-self: stretch;
    min-height: 260px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--ecco-shadow-sm);
}
.material-page > .why-choose-stickers > div > picture {
    display: block;
    position: static;
    max-height: none;
}
.material-page > .why-choose-stickers > div picture img,
.material-page > .why-choose-stickers > div > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    display: block;
    border-radius: 10px;
    transition: transform 0.6s ease;
}
.material-page > .why-choose-stickers > div:has(img):hover img {
    transform: scale(1.03);
}
@media (max-width: 900px) {
    /* Mobil (1 kolonne): billedet i sit naturlige format, ingen absolut placering */
    .material-page > .why-choose-stickers > div:has(img) { min-height: 0; }
    .material-page > .why-choose-stickers > div picture img,
    .material-page > .why-choose-stickers > div > img { position: static; height: auto; }
}

/* ==========================================================================
   Ikonfarve B (17-09-2026, Ash): ikoner = information (navy), brun = kun handling (CTA/links).
   Cirkler: lys navy-tone med navy ikon; hover: fyldt navy med hvidt ikon.
   Paa graa sektioner (industry-section-subtle) hvid cirkel, saa den ikke drukner.
   ========================================================================== */
.material-page {
    --ecco-icon-bg: #e6e8ec; /* opak, saa cirklen ser ens ud paa hvid og graa baggrund */
    --ecco-icon-fg: #343a4c;
    --ecco-icon-hover-bg: #343a4c;
    --ecco-icon-hover-fg: #ffffff;
}
.material-page .industry-icon,
.material-page > .feature-cards > .feature-card > .feature-icon {
    background: var(--ecco-icon-bg);
    color: var(--ecco-icon-fg);
}
.material-page .industry-card:hover .industry-icon,
.material-page > .feature-cards > .feature-card:hover > .feature-icon {
    background: var(--ecco-icon-hover-bg);
    color: var(--ecco-icon-hover-fg);
}
/* Trin-tal 1-4 */
.material-page > .why-choose-stickers ol.step-list > li::before {
    background: var(--ecco-icon-bg);
    color: var(--ecco-icon-fg);
}
/* Stat-cards + trust-bar: ikonet ligger i selve data-URI'en, derfor navy-udgave her */
.material-page .stat-card::before,
.material-page .trust-bar li::before {
    background-color: var(--ecco-icon-bg);
    box-shadow: none;
}
.material-page .stat-card:hover::before {
    background-color: var(--ecco-icon-hover-bg);
}
.material-page .stat-card[data-icon="medal"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23343a4c' d='M214 96a86 86 0 1 0-140 66.87V240a6 6 0 0 0 2.85 5.1a5.93 5.93 0 0 0 3.15.9a6 6 0 0 0 2.68-.63L128 222.71l45.33 22.66A6 6 0 0 0 182 240v-77.13A85.87 85.87 0 0 0 214 96M54 96a74 74 0 1 1 74 74a74.09 74.09 0 0 1-74-74m116 134.29l-39.33-19.66a6 6 0 0 0-5.36 0L86 230.29V171a85.75 85.75 0 0 0 84 0ZM128 150a54 54 0 1 0-54-54a54.06 54.06 0 0 0 54 54m0-96a42 42 0 1 1-42 42a42 42 0 0 1 42-42'/%3E%3C/svg%3E"); }
.material-page .stat-card[data-icon="medal"]:hover::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M214 96a86 86 0 1 0-140 66.87V240a6 6 0 0 0 2.85 5.1a5.93 5.93 0 0 0 3.15.9a6 6 0 0 0 2.68-.63L128 222.71l45.33 22.66A6 6 0 0 0 182 240v-77.13A85.87 85.87 0 0 0 214 96M54 96a74 74 0 1 1 74 74a74.09 74.09 0 0 1-74-74m116 134.29l-39.33-19.66a6 6 0 0 0-5.36 0L86 230.29V171a85.75 85.75 0 0 0 84 0ZM128 150a54 54 0 1 0-54-54a54.06 54.06 0 0 0 54 54m0-96a42 42 0 1 1-42 42a42 42 0 0 1 42-42'/%3E%3C/svg%3E"); }
.material-page .stat-card[data-icon="leaf"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23343a4c' d='M221.45 40.19a6 6 0 0 0-5.64-5.64C140.43 30.11 80.14 52.71 54.53 95c-17.44 28.79-16.76 62.8 1.79 96.2l-20.56 20.56a6 6 0 1 0 8.48 8.48l20.56-20.56c17.27 9.59 34.7 14.41 51.49 14.41A85.4 85.4 0 0 0 161 201.47c42.29-25.61 64.88-85.9 60.45-161.28m-66.66 151c-24.08 14.58-52.64 14.37-81.13-.39l90.59-90.59a6 6 0 0 0-8.48-8.48l-90.59 90.61c-14.76-28.49-15-57-.39-81.13c22.68-37.43 76.63-57.8 145-54.95c2.8 68.32-17.57 122.28-55 144.95Z'/%3E%3C/svg%3E"); }
.material-page .stat-card[data-icon="leaf"]:hover::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M221.45 40.19a6 6 0 0 0-5.64-5.64C140.43 30.11 80.14 52.71 54.53 95c-17.44 28.79-16.76 62.8 1.79 96.2l-20.56 20.56a6 6 0 1 0 8.48 8.48l20.56-20.56c17.27 9.59 34.7 14.41 51.49 14.41A85.4 85.4 0 0 0 161 201.47c42.29-25.61 64.88-85.9 60.45-161.28m-66.66 151c-24.08 14.58-52.64 14.37-81.13-.39l90.59-90.59a6 6 0 0 0-8.48-8.48l-90.59 90.61c-14.76-28.49-15-57-.39-81.13c22.68-37.43 76.63-57.8 145-54.95c2.8 68.32-17.57 122.28-55 144.95Z'/%3E%3C/svg%3E"); }
.material-page .stat-card[data-icon="truck"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23343a4c' d='m253.57 117.78l-14-35a13.93 13.93 0 0 0-13-8.8H190V64a6 6 0 0 0-6-6H32a14 14 0 0 0-14 14v112a14 14 0 0 0 14 14h18.6a30 30 0 0 0 58.8 0h53.2a30 30 0 0 0 58.8 0H240a14 14 0 0 0 14-14v-64a6 6 0 0 0-.43-2.22M190 86h36.58a2 2 0 0 1 1.86 1.26l10.7 26.74H190ZM30 72a2 2 0 0 1 2-2h146v68H30Zm50 138a18 18 0 1 1 18-18a18 18 0 0 1-18 18m82.6-24h-53.2a30 30 0 0 0-58.8 0H32a2 2 0 0 1-2-2v-34h148v15.48A30.1 30.1 0 0 0 162.6 186m29.4 24a18 18 0 1 1 18-18a18 18 0 0 1-18 18m50-26a2 2 0 0 1-2 2h-18.6a30.05 30.05 0 0 0-29.4-24c-.67 0-1.34 0-2 .07V126h52Z'/%3E%3C/svg%3E"); }
.material-page .stat-card[data-icon="truck"]:hover::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='m253.57 117.78l-14-35a13.93 13.93 0 0 0-13-8.8H190V64a6 6 0 0 0-6-6H32a14 14 0 0 0-14 14v112a14 14 0 0 0 14 14h18.6a30 30 0 0 0 58.8 0h53.2a30 30 0 0 0 58.8 0H240a14 14 0 0 0 14-14v-64a6 6 0 0 0-.43-2.22M190 86h36.58a2 2 0 0 1 1.86 1.26l10.7 26.74H190ZM30 72a2 2 0 0 1 2-2h146v68H30Zm50 138a18 18 0 1 1 18-18a18 18 0 0 1-18 18m82.6-24h-53.2a30 30 0 0 0-58.8 0H32a2 2 0 0 1-2-2v-34h148v15.48A30.1 30.1 0 0 0 162.6 186m29.4 24a18 18 0 1 1 18-18a18 18 0 0 1-18 18m50-26a2 2 0 0 1-2 2h-18.6a30.05 30.05 0 0 0-29.4-24c-.67 0-1.34 0-2 .07V126h52Z'/%3E%3C/svg%3E"); }
.material-page .stat-card[data-icon="check"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23343a4c' d='M172.24 99.76a6 6 0 0 1 0 8.48l-56 56a6 6 0 0 1-8.48 0l-24-24a6 6 0 0 1 8.48-8.48L112 151.51l51.76-51.75a6 6 0 0 1 8.48 0M230 128A102 102 0 1 1 128 26a102.12 102.12 0 0 1 102 102m-12 0a90 90 0 1 0-90 90a90.1 90.1 0 0 0 90-90'/%3E%3C/svg%3E"); }
.material-page .stat-card[data-icon="check"]:hover::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M172.24 99.76a6 6 0 0 1 0 8.48l-56 56a6 6 0 0 1-8.48 0l-24-24a6 6 0 0 1 8.48-8.48L112 151.51l51.76-51.75a6 6 0 0 1 8.48 0M230 128A102 102 0 1 1 128 26a102.12 102.12 0 0 1 102 102m-12 0a90 90 0 1 0-90 90a90.1 90.1 0 0 0 90-90'/%3E%3C/svg%3E"); }
.material-page .stat-card[data-icon="map-pin"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23343a4c' d='M128 66a38 38 0 1 0 38 38a38 38 0 0 0-38-38m0 64a26 26 0 1 1 26-26a26 26 0 0 1-26 26m0-112a86.1 86.1 0 0 0-86 86c0 30.91 14.34 63.74 41.47 94.94a252.3 252.3 0 0 0 41.09 38a6 6 0 0 0 6.88 0a252.3 252.3 0 0 0 41.09-38c27.13-31.2 41.47-64 41.47-94.94a86.1 86.1 0 0 0-86-86m0 206.51C113 212.93 54 163.62 54 104a74 74 0 0 1 148 0c0 59.62-59 108.93-74 120.51'/%3E%3C/svg%3E"); }
.material-page .stat-card[data-icon="map-pin"]:hover::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M128 66a38 38 0 1 0 38 38a38 38 0 0 0-38-38m0 64a26 26 0 1 1 26-26a26 26 0 0 1-26 26m0-112a86.1 86.1 0 0 0-86 86c0 30.91 14.34 63.74 41.47 94.94a252.3 252.3 0 0 0 41.09 38a6 6 0 0 0 6.88 0a252.3 252.3 0 0 0 41.09-38c27.13-31.2 41.47-64 41.47-94.94a86.1 86.1 0 0 0-86-86m0 206.51C113 212.93 54 163.62 54 104a74 74 0 0 1 148 0c0 59.62-59 108.93-74 120.51'/%3E%3C/svg%3E"); }
.material-page .stat-card[data-icon="clock"]::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23343a4c' d='M128 26a102 102 0 1 0 102 102A102.12 102.12 0 0 0 128 26m0 192a90 90 0 1 1 90-90a90.1 90.1 0 0 1-90 90m62-90a6 6 0 0 1-6 6h-56a6 6 0 0 1-6-6V72a6 6 0 0 1 12 0v50h50a6 6 0 0 1 6 6'/%3E%3C/svg%3E"); }
.material-page .stat-card[data-icon="clock"]:hover::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='white' d='M128 26a102 102 0 1 0 102 102A102.12 102.12 0 0 0 128 26m0 192a90 90 0 1 1 90-90a90.1 90.1 0 0 1-90 90m62-90a6 6 0 0 1-6 6h-56a6 6 0 0 1-6-6V72a6 6 0 0 1 12 0v50h50a6 6 0 0 1 6 6'/%3E%3C/svg%3E"); }
.material-page .trust-bar li:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23343a4c' d='M214 96a86 86 0 1 0-140 66.87V240a6 6 0 0 0 2.85 5.1a5.93 5.93 0 0 0 3.15.9a6 6 0 0 0 2.68-.63L128 222.71l45.33 22.66A6 6 0 0 0 182 240v-77.13A85.87 85.87 0 0 0 214 96M54 96a74 74 0 1 1 74 74a74.09 74.09 0 0 1-74-74m116 134.29l-39.33-19.66a6 6 0 0 0-5.36 0L86 230.29V171a85.75 85.75 0 0 0 84 0ZM128 150a54 54 0 1 0-54-54a54.06 54.06 0 0 0 54 54m0-96a42 42 0 1 1-42 42a42 42 0 0 1 42-42'/%3E%3C/svg%3E"); }
.material-page .trust-bar li:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23343a4c' d='M221.45 40.19a6 6 0 0 0-5.64-5.64C140.43 30.11 80.14 52.71 54.53 95c-17.44 28.79-16.76 62.8 1.79 96.2l-20.56 20.56a6 6 0 1 0 8.48 8.48l20.56-20.56c17.27 9.59 34.7 14.41 51.49 14.41A85.4 85.4 0 0 0 161 201.47c42.29-25.61 64.88-85.9 60.45-161.28m-66.66 151c-24.08 14.58-52.64 14.37-81.13-.39l90.59-90.59a6 6 0 0 0-8.48-8.48l-90.59 90.61c-14.76-28.49-15-57-.39-81.13c22.68-37.43 76.63-57.8 145-54.95c2.8 68.32-17.57 122.28-55 144.95Z'/%3E%3C/svg%3E"); }
.material-page .trust-bar li:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath fill='%23343a4c' d='m253.57 117.78l-14-35a13.93 13.93 0 0 0-13-8.8H190V64a6 6 0 0 0-6-6H32a14 14 0 0 0-14 14v112a14 14 0 0 0 14 14h18.6a30 30 0 0 0 58.8 0h53.2a30 30 0 0 0 58.8 0H240a14 14 0 0 0 14-14v-64a6 6 0 0 0-.43-2.22M190 86h36.58a2 2 0 0 1 1.86 1.26l10.7 26.74H190ZM30 72a2 2 0 0 1 2-2h146v68H30Zm50 138a18 18 0 1 1 18-18a18 18 0 0 1-18 18m82.6-24h-53.2a30 30 0 0 0-58.8 0H32a2 2 0 0 1-2-2v-34h148v15.48A30.1 30.1 0 0 0 162.6 186m29.4 24a18 18 0 1 1 18-18a18 18 0 0 1-18 18m50-26a2 2 0 0 1-2 2h-18.6a30.05 30.05 0 0 0-29.4-24c-.67 0-1.34 0-2 .07V126h52Z'/%3E%3C/svg%3E"); }
/* Pil efter korttitel: bind den til sidste ord (ingen linjeskift foer pilen) */
.material-page .industry-section-subtle .industry-card h3::after {
    content: '\00a0\2192';
    display: inline;
    margin-left: 0;
    white-space: nowrap;
    transition: padding-left 0.3s ease;
}
.material-page .industry-section-subtle .industry-card:hover h3::after {
    transform: none;
    padding-left: 0.25em;
}

/* ==========================================================================
   Branchekort: mildere mobil-beskaering (21-09-2026)
   Billederne er 4:3. Med aspect-ratio 16/9 + object-fit:cover blev der
   klippet ca. 135 px i baade top og bund paa mobil, hvilket skar toppen af
   pumpehoved (personlig pleje) og sprayhaandtag (husholdning) vaek.
   4/3 = samme format som billederne, dvs. slet ingen beskaering paa mobil.
   ========================================================================== */
@media (max-width: 768px) {
    .material-page .industry-card.industry-card-image .industry-card-image-wrap {
        aspect-ratio: 4 / 3;
    }
}