:root { --bg: #f1f5f9; --text: #0f172a; --border: #e2e8f0; --accent: #3b82f6; }
        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; margin: 0; background: var(--bg); color: var(--text); line-height: 1.5; }
        .app { max-width: 500px; margin: 0 auto; background: white; min-height: 100vh; }
        .header { text-align: center; padding: 30px 20px; background: white; }
        .product-img { width: 100%; max-height: 250px; object-fit: contain; margin-bottom: 15px; }
        #p-name { font-size: 26px; font-weight: 800; margin: 0; color: var(--text); }
        /* RETTET: Fjernet uppercase herfra for korrekt branding */
        #p-brand { font-size: 14px; font-weight: 700; color: #64748b; letter-spacing: 1px; margin-top: 2px; margin-bottom: 10px; }
        
        .marks-row { 
            display: flex; 
            flex-wrap: wrap; 
            gap: 12px; 
            justify-content: center; 
            margin: 20px 0;
            padding: 0 10px;
        }

        .mark-badge { 
            height: auto;
            width: 12%; 
            min-width: 40px; 
            max-width: 60px; 
            object-fit: contain;
            transition: transform 0.2s ease;
        }

        @media (max-width: 480px) {
            .mark-badge {
                width: 18%; 
                gap: 8px;
            }
        }

        .content { padding: 0 20px 60px; }
        .section { background: #fff; border-radius: 16px; padding: 20px; margin-bottom: 20px; border: 1px solid var(--border); }
        .section-title { font-size: 11px; font-weight: 800; color: #64748b; text-transform: uppercase; border-bottom: 1px solid #f1f5f9; padding-bottom: 8px; margin-bottom: 15px; display: block; }
        
        .ns-container { text-align: center; margin-bottom: 25px; display: none; }
        .ns-label { font-size: 9px; font-weight: 900; color: #1e293b; text-transform: uppercase; margin-bottom: 4px; display: block; letter-spacing: 0.5px; }
        .ns-box { display: inline-flex; background: #1e293b; padding: 4px; border-radius: 8px; gap: 2px; }
        .ns { width: 30px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 4px; font-weight: 900; color: white; opacity: 0.2; font-size: 16px; }
        .ns-a { background: #008b4c; } .ns-b { background: #80bb35; } .ns-c { background: #fecb02; } .ns-d { background: #ee8100; } .ns-e { background: #e63e11; }
        .ns.active { opacity: 1; transform: scale(1.15); box-shadow: 0 2px 8px rgba(0,0,0,0.2); z-index: 2; }

        .body-text { font-size: 14px; color: #334155; }
        .nutri-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .nutri-table th { font-size: 10px; color: #94a3b8; text-align: right; padding-bottom: 10px; }
        .nutri-table td { padding: 10px 0; border-bottom: 1px solid #f1f5f9; }
        .nutri-table td:not(:first-child) { text-align: right; font-weight: 700; }
        .ri-col { color: #94a3b8; font-weight: 400 !important; width: 45px; }
        .vit-spacer { height: 12px; border: none !important; }
        .ri-note { font-size: 10px; color: #94a3b8; margin-top: 15px; line-height: 1.4; }
        .grid-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
        .card { background: #f8fafc; padding: 12px; border-radius: 12px; border: 1px solid #f1f5f9; }
        .card-label { display: block; font-size: 9px; font-weight: 800; color: #64748b; text-transform: uppercase; margin-bottom: 4px; }
        .card-val { font-size: 14px; font-weight: 700; color: #1e293b; }
        #p-env-tags { display: flex; flex-wrap: wrap; gap: 12px; }
        .env-card {
            display: inline-flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 116px;
            min-height: 136px;
            padding: 12px 10px;
        }
        .env-card-icon {
            width: 68px;
            height: 68px;
            object-fit: contain;
        }
        .env-card-label {
            margin-top: 10px;
            text-align: center;
            font-size: 12px;
            font-weight: 800;
            line-height: 1.15;
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }
        .warn-wrapper { margin-bottom: 20px; }
        .warn-box { background: #fffbeb; border-left: 4px solid #f59e0b; padding: 16px; border-radius: 12px; font-size: 12px; color: #92400e; font-weight: 600; line-height: 1.4; }
#p-biz-addr{ white-space: pre-line; }

        @page {
            size: A4;
            margin: 10mm;
        }

        @media print {
            :root { --bg: #ffffff; --text: #000000; --border: #d1d5db; }
            * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
            body { background: #ffffff !important; margin: 0; }
            .app { max-width: none; margin: 0; min-height: auto; }
            .header { padding: 12px 0 10px; }
            .content { padding: 0; }
            .section {
                border: 1px solid #d1d5db;
                border-radius: 10px;
                margin-bottom: 10px;
                padding: 12px;
                break-inside: avoid;
                page-break-inside: avoid;
            }
            .grid-cards { gap: 8px; }
            .card { break-inside: avoid; page-break-inside: avoid; }
            .warn-wrapper, #box-env, #box-alg, #box-dates, #sec-biz { break-inside: avoid; page-break-inside: avoid; }
        }