/* ==================== GLOBAL RESET ==================== */
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Gabarito', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
            margin: 0 !important;
            padding: 0 !important;
        }

        /* ==================== HEADER LIGHT THEME ==================== */

        /* Top bar - Change from red gradient to green */
        div[style*="linear-gradient(135deg, #B22222"] {
            background: #156B48 !important;
        }

        /* Top bar text - Keep white (except Trustpilot stars) */
        div[style*="linear-gradient(135deg, #B22222"] *:not(.ph-star) {
            color: #ffffff !important;
        }

        /* Top bar icons - White color for USP icons (except Trustpilot stars) */
        div[style*="linear-gradient(135deg, #B22222"] i:not(.ph-star) {
            color: #ffffff !important;
        }

        /* Trustpilot stars - Keep Trustpilot green */
        header i.ph-star.ph-fill {
            color: #00b67a !important;
        }

        /* Main header background - Change from #1a1a1a to white */
        header[style*="#1a1a1a"],
        header > div[style*="#1a1a1a"] {
            background: #ffffff !important;
        }

        header {
            background: #ffffff !important;
        }

        /* Header text colors */
        header span,
        header a {
            color: #111827 !important;
        }

        /* Override: Keep top bar text white */
        div[style*="linear-gradient(135deg, #B22222"] span,
        div[style*="linear-gradient(135deg, #B22222"] a {
            color: #ffffff !important;
        }

        /* Logo - Keep green (remove white filter) */
        header img[alt*="ITLAGERSALG"] {
            filter: none !important;
        }

        /* Menu icon - Keep visible (remove white filter) */
        header img[alt="Menu"],
        header button img[alt="Menu"] {
            filter: none !important;
        }

        /* Customer service icon - Invert from white to black */
        header img[alt="Kundeservice"][style*="invert"] {
            filter: brightness(0) !important;
        }

        /* Kundeservice text color */
        header span[style*="color: #E8C9A0"],
        header div.tw-text-white span {
            color: #111827 !important;
        }

        /* Nav section background */
        nav[style*="#1a1a1a"] {
            background: #ffffff !important;
        }

        /* Nav links - override dark mode styles */
        nav a {
            background: #f9fafb !important;
            border-color: #e5e7eb !important;
            color: #111827 !important;
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        nav a:hover {
            border-color: #156B48 !important;
            color: #156B48 !important;
        }

        /* Search input placeholder */
        header input[type="text"]::placeholder,
        header input[type="search"]::placeholder {
            color: #156B48 !important;
        }

        /* Search input text */
        header input[type="text"],
        header input[type="search"] {
            color: #111827 !important;
        }

        /* Navbar container max-width constraint */
        header .tw-container.tw-max-w-screen-2xl {
            max-width: 100% !important;
            box-sizing: border-box !important;
        }

        /* ==================== FOOTER LIGHT THEME ==================== */

        /* Main footer background - #1a1a1a to white */
        footer[style*="#1a1a1a"] {
            background: #ffffff !important;
        }

        /* Logo in footer - Invert from white to black */
        footer img[alt*="ITLAGERSALG"].hero-logo {
            filter: brightness(0) !important;
        }

        /* Footer text colors */
        footer p,
        footer span,
        footer li {
            color: #374151 !important;
        }

        /* Footer headings */
        footer h1,
        footer h2,
        footer h3,
        footer h4 {
            color: #111827 !important;
        }

        /* Footer links - Remove underline */
        footer a {
            color: #374151 !important;
            text-decoration: none !important;
        }

        footer a:hover {
            color: #156B48 !important;
            text-decoration: none !important;
        }

        /* Category cards - Make borders visible */
        footer a[class*="tw-border-itl-green-light"] {
            background: #f9fafb !important;
            border-color: #e5e7eb !important;
        }

        footer a[class*="tw-border-itl-green-light"]:hover {
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
        }

        /* Newsletter box */
        footer div[style*="rgba(21, 107, 72, 0.05)"] {
            background: #f9fafb !important;
            border-color: #e5e7eb !important;
        }

        footer input {
            background: #ffffff !important;
            color: #111827 !important;
            border-color: #d1d5db !important;
        }

        footer input[style*="bg-black/30"] {
            background: #ffffff !important;
        }

        footer button[type="submit"] {
            background: #156B48 !important;
            color: #ffffff !important;
        }

        footer button[type="submit"]:hover {
            background: #0F4A32 !important;
        }

        /* Newsletter success card */
        footer div[style*="rgba(32, 201, 151, 0.15)"] {
            background: #ecfdf5 !important;
            border-color: #10b981 !important;
        }

        /* Divider */
        footer hr[style*="#374151"] {
            border-top: 1px solid #e5e7eb !important;
        }

        /* Social icons */
        footer i.ph-facebook-logo,
        footer i.ph-instagram-logo,
        footer i.ph-tiktok-logo {
            color: #111827 !important;
        }

        /* Contact section - override gap */
        footer .tw-gap-8 {
            gap: 2rem !important;
        }

        /* On desktop: add spacing between columns */
        @media (min-width: 768px) {
            footer .tw-grid.tw-gap-8 > div:not(:last-child) {
                margin-right: 1rem !important;
            }
        }

        /* Contact boxes */
        footer div[style*="border: 1px solid #374151"] {
            border: 1px solid #e5e7eb !important;
            padding: 0.5rem !important;
        }

        /* Contact boxes - reduce height */
        footer div.tw-h-16 {
            height: auto !important;
            min-height: 3rem !important;
            padding: 0.5rem 1rem !important;
        }

        footer a[href^="tel"],
        footer a[href^="mailto"] {
            color: #111827 !important;
            text-decoration: none !important;
        }

        footer a[href^="tel"]:hover,
        footer a[href^="mailto"]:hover {
            color: #156B48 !important;
        }

        /* ==================== BETALINGSMULIGHEDER SECTION ==================== */

        /* Desktop payment section - #151515 to light gray */
        div.tw-pt-8.tw-pb-8[style*="#151515"] {
            background: #f9fafb !important;
        }

        /* Mobile payment section - #1a1a1a to light gray */
        div.tw-py-6[style*="#1a1a1a"] {
            background: #f9fafb !important;
        }

        /* Payment logos - Adjust for light theme */

        /* Keep colored logos as-is */
        footer img[alt="Dankort"],
        footer img[alt="MobilePay"],
        footer img[alt="Mastercard"] {
            filter: none !important;
        }

        /* Invert white logos to dark */
        footer img[alt="Visa"][style*="invert"],
        footer img[alt="Apple Pay"][style*="invert"],
        footer img[alt="Viabill"][style*="invert"] {
            filter: brightness(0) !important;
        }

        /* Badge images - Keep original */
        footer img[alt*="Gazelle"],
        footer img[alt*="Danmærket"],
        footer img[alt*="Plastik"],
        footer img[alt*="Verdensmålene"] {
            filter: none !important;
        }

        /* ==================== COPYRIGHT SECTION ==================== */

        /* Copyright section - #0d0d0d to white */
        div[style*="#0d0d0d"],
        div.tw-py-6[style*="#151515"]:last-child {
            background: #ffffff !important;
            border-top: 1px solid #e5e7eb !important;
        }

        /* Copyright text */
        div[style*="#0d0d0d"] p,
        div.tw-py-6[style*="#151515"]:last-child p {
            color: #6b7280 !important;
        }

        /* Copyright links */
        div[style*="#0d0d0d"] a,
        div.tw-py-6[style*="#151515"]:last-child a {
            color: #6b7280 !important;
            text-decoration: none !important;
        }

        div[style*="#0d0d0d"] a:hover,
        div.tw-py-6[style*="#151515"]:last-child a:hover {
            color: #156B48 !important;
        }

        /* ==================== BLOG LIST STYLES ==================== */

        .blog-list-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px 20px;
        }

        .blog-list-header {
            text-align: center;
            margin-bottom: 60px;
        }

        .blog-list-header h1 {
            font-size: 42px;
            font-weight: 700;
            color: #156B48;
            margin-bottom: 16px;
        }

        .blog-list-header p {
            font-size: 18px;
            color: #666;
        }

        .blog-intro {
            font-size: 18px;
            line-height: 1.6;
            color: #4b5563;
            max-width: 800px;
            margin: 0 auto;
            text-align: left;
        }

        .blog-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
            gap: 30px;
            margin-bottom: 40px;
        }

        .blog-card {
            background: white;
            border-radius: 12px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            transition: transform 0.2s, box-shadow 0.2s;
            cursor: pointer;
        }

        .blog-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }

        .blog-card-image-wrapper {
            position: relative;
            width: 100%;
            height: 200px;
            background: #f5f5f5;
        }

        .blog-card-image {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .blog-card-content {
            padding: 24px;
        }

        .blog-card-category {
            position: absolute;
            top: 12px;
            left: 12px;
            display: inline-block;
            padding: 6px 14px;
            background: #156B48;
            color: white;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        }

        .blog-card-title {
            font-size: 22px;
            font-weight: 600;
            color: #333;
            margin-bottom: 12px;
            line-height: 1.3;
        }

        .blog-card-excerpt {
            font-size: 15px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 16px;
        }

        .blog-card-meta {
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 13px;
            color: #999;
        }

        .loading {
            text-align: center;
            padding: 60px 20px;
            font-size: 18px;
            color: #666;
        }

        .error {
            text-align: center;
            padding: 60px 20px;
            color: #e53e3e;
        }

        @media (max-width: 768px) {
            .blog-grid {
                grid-template-columns: 1fr;
            }

            .blog-list-header h1 {
                font-size: 32px;
            }
        }

/* ==================== SINGLE BLOG POST STYLES ==================== */

.blog-container {
    max-width: 800px;
    margin: 2rem auto;
    padding: 0 1rem;
}

.blog-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid #e5e7eb;
}

.blog-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 1rem;
    line-height: 1.2;
}

.blog-meta {
    display: flex;
    gap: 1.5rem;
    color: #6b7280;
    font-size: 0.95rem;
    flex-wrap: wrap;
}

.blog-meta span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.blog-category-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #22c55e;
    color: white;
    border-radius: 1rem;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.blog-content {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #374151;
}

.blog-content h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    color: #111827;
}

.blog-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-top: 2rem;
    margin-bottom: 0.75rem;
    color: #1f2937;
}

.blog-content p {
    margin-bottom: 1.5rem;
}

.blog-content ul, .blog-content ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.blog-content li {
    margin-bottom: 0.5rem;
}

.blog-content blockquote {
    border-left: 4px solid #22c55e;
    padding-left: 1.5rem;
    margin: 2rem 0;
    font-style: italic;
    color: #4b5563;
}

.blog-content img,
.blog-content img.img-responsive,
article .blog-content img,
article .blog-content img.img-responsive {
    width: 100% !important;
    height: auto !important;
    border-radius: 0.5rem;
    margin: 2rem 0;
    display: block;
}

.blog-content a {
    color: #22c55e;
    text-decoration: underline;
}

.blog-content a:hover {
    color: #16a34a;
}

.blog-content code {
    background: #f3f4f6;
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-family: 'Courier New', monospace;
    font-size: 0.9em;
}

.blog-content pre {
    background: #1f2937;
    color: #f9fafb;
    padding: 1.5rem;
    border-radius: 0.5rem;
    overflow-x: auto;
    margin: 2rem 0;
}

.blog-content pre code {
    background: none;
    padding: 0;
    color: inherit;
}

.back-link {
    display: inline-block;
    margin-bottom: 2rem;
    color: #22c55e;
    text-decoration: none;
    font-weight: 500;
}

.back-link:hover {
    text-decoration: underline;
}

@media (max-width: 640px) {
    .blog-title {
        font-size: 1.875rem;
    }

    .blog-content {
        font-size: 1rem;
    }

    .blog-content h2 {
        font-size: 1.5rem;
    }

    .blog-content h3 {
        font-size: 1.25rem;
    }
}