/* HF Visualizer 2026 Design System */
    /* :root-tokens flyttet til tokens.css (v1.11.0) */

    /* Texture applied to tiles */
    .hf-tile:not(.hf-tile-product-swatch)[data-mat*="antracit"], .hf-tile:not(.hf-tile-product-swatch)[data-mat*="gråsort"], .hf-tile:not(.hf-tile-product-swatch)[data-mat*="sort"] { 
        background-image: var(--hf-tex-antracit); background-size: cover; color: white !important; 
        text-shadow: 0 1px 3px rgba(0,0,0,0.9); border: none; font-weight: 800;
    }
    .hf-tile:not(.hf-tile-product-swatch)[data-mat*="grå"], .hf-tile:not(.hf-tile-product-swatch)[data-mat*="graa"] { 
        background-image: var(--hf-tex-graa); background-size: cover; color: white !important; 
        text-shadow: 0 1px 3px rgba(0,0,0,0.9); border: none; font-weight: 800;
    }
    .hf-tile:not(.hf-tile-product-swatch)[data-mat*="stål"] { 
        background-image: var(--hf-tex-staal); background-size: cover; color: white !important; 
        text-shadow: 0 1px 3px rgba(0,0,0,0.9); border: none; font-weight: 800;
    }
    .hf-tile:not(.hf-tile-product-swatch)[data-mat*="komposit"] { 
        background-image: var(--hf-tex-komposit); background-size: cover; color: white !important; 
        text-shadow: 0 1px 3px rgba(0,0,0,0.9); border: none; font-weight: 800;
    }
    
    .hf-tile.active.hf-tile-has-texture {
        border-color: var(--hf-success);
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.92), inset 0 0 0 999px rgba(20, 83, 45, 0.12);
        color: white !important;
        transform: scale(1.01);
    }

    .hf-tile.hf-tile-product-swatch {
        min-height: 58px;
        border: 1px solid #cbd5e1;
        background-color: #eef3f8;
        background-image:
            linear-gradient(180deg, rgba(15, 23, 42, 0.08), rgba(15, 23, 42, 0.28)),
            var(--hf-swatch-image);
        background-size: cover;
        background-position: center;
        color: #ffffff !important;
        text-shadow: 0 1px 4px rgba(0, 0, 0, 0.88);
        overflow: hidden;
        position: relative;
    }

    .hf-tile.hf-tile-product-swatch span {
        position: relative;
        z-index: 1;
    }

    .hf-tile.hf-tile-product-swatch.active {
        border-color: var(--hf-success);
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.9);
    }

    .hf-tile.hf-tile-product-swatch.active::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(20, 83, 45, 0.08);
        pointer-events: none;
    }

    .hf-app-container {
        font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        background-color: var(--hf-bg-page);
        color: var(--hf-text-dark);
        max-width: 960px;
        margin: 40px auto;
        padding: 40px 20px;
        line-height: 1.6;
        --hf-keyboard-offset: 0px;
    }

    .hf-app-container {
        max-width: none;
        margin: 0;
        padding: 8px;
        min-height: 100vh;
        min-height: -webkit-fill-available;
        padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
    }

    .hf-progress-wrap {
        background: #ffffff;
        border: 1px solid var(--hf-border);
        border-radius: 14px;
        padding: 14px 16px;
        margin-bottom: 18px;
        box-shadow: var(--hf-shadow-sm);
        position: sticky;
        top: 10px;
        z-index: 80;
    }

    body.hf-visualizer-embed .hf-progress-wrap {
        display: block;
        position: sticky;
        top: 4px;
        z-index: 95;
        padding: 7px 9px;
        margin-bottom: 10px;
        border-radius: 10px;
        border-color: #dbe4ee;
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.08);
    }

    body.hf-visualizer-embed .hf-progress-head {
        margin-bottom: 4px;
    }

    body.hf-visualizer-embed .hf-progress-label {
        font-size: 13px;
    }

    body.hf-visualizer-embed .hf-progress-percent {
        font-size: 12px;
    }

    body.hf-visualizer-embed .hf-progress-track {
        height: 4px;
    }

    .hf-progress-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
        margin-bottom: 8px;
    }

    .hf-progress-label {
        color: var(--hf-primary);
        font-size: 15px;
        font-weight: 800;
    }

    .hf-progress-percent {
        color: var(--hf-text-muted);
        font-size: 13px;
        font-weight: 700;
    }

    .hf-progress-track {
        height: 8px;
        border-radius: 999px;
        background: #e2e8f0;
        overflow: hidden;
    }

    .hf-progress-fill {
        width: 25%;
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, #4d6a78, #5f8394);
        transition: width 220ms ease;
    }

    .hf-step-nav {
        display: none;
        gap: 8px;
        margin: 0 0 12px;
    }

    .hf-step-nav-btn {
        flex: 1 1 0;
        border: 1px solid #cbd5e1;
        background: #ffffff;
        color: #475569;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.2;
        padding: 8px 10px;
        text-align: center;
        cursor: pointer;
        transition: background 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

    .hf-step-nav-btn span {
        display: block;
        font-size: 11px;
        font-weight: 600;
        color: #64748b;
        margin-top: 2px;
        line-height: 1.2;
    }

    .hf-step-nav-btn:disabled {
        cursor: not-allowed;
        opacity: 0.55;
    }

    .hf-step-nav-btn.is-active {
        border-color: #4d6a78;
        background: #eaf2f8;
        color: #223744;
        box-shadow: 0 0 0 2px rgba(77, 106, 120, 0.14);
    }

    .hf-step-nav-btn.is-complete {
        border-color: #10b981;
        color: #065f46;
        background: #f0fdf4;
    }

    .hf-app-container.hf-step-mode .hf-step-nav {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hf-app-container.hf-step-mode .hf-step-panel {
        margin-bottom: 0;
    }

    .hf-app-container.hf-step-mode .hf-step-panel:not(.is-active) {
        display: none !important;
    }

    /* Vertical Connector Logic */
    .hf-steps-wrapper {
        position: relative;
    }

    .hf-app-container.hf-step-mode .hf-steps-wrapper {
        display: flex;
        flex-direction: column;
    }

    /* Step Cards */
    .hf-card {
        background: var(--hf-bg-card);
        border: 1px solid var(--hf-border);
        border-radius: var(--hf-radius);
        padding: 40px;
        margin-bottom: 32px;
        box-shadow: var(--hf-shadow-md);
        transition: var(--hf-transition);
        position: relative;
        z-index: 2;
    }

    body.hf-visualizer-embed .hf-card {
        padding: 28px;
        margin-bottom: 18px;
    }

    @media (max-width: 960px) {
        body.hf-visualizer-embed .hf-card {
            padding: 18px;
        }
    }

    body.hf-visualizer-embed .hf-step-title {
        font-size: 22px;
        gap: 10px;
        margin-bottom: 8px;
    }

    body.hf-visualizer-embed .hf-step-number {
        width: 34px;
        height: 34px;
        font-size: 15px;
    }

    body.hf-visualizer-embed .hf-step-desc {
        font-size: 15px;
        margin-bottom: 14px;
        max-width: none;
    }

    body.hf-visualizer-embed .hf-btn {
        padding: 9px 14px;
        font-size: 13px;
        border-radius: 8px;
    }

    body.hf-visualizer-embed .hf-btn-success {
        font-size: 16px;
        padding: 11px 16px;
        border-radius: 8px;
    }

    body.hf-visualizer-embed .hf-tool-panel {
        gap: 8px !important;
        padding: 10px !important;
        margin-bottom: 10px !important;
        border-radius: 10px !important;
    }

    body.hf-visualizer-embed .hf-tool-btn,
    body.hf-visualizer-embed .hf-tool-mini-btn {
        padding: 6px 10px;
        font-size: 12px;
        border-radius: 8px;
        line-height: 1.25;
    }

    body.hf-visualizer-embed .hf-tool-mini-btn {
        min-width: 34px;
    }

    body.hf-visualizer-embed [id^="brush-size-"] {
        width: 110px !important;
    }

    body.hf-visualizer-embed [id^="canvas-wrapper-"] {
        height: min(70dvh, 760px) !important;
        min-height: 360px !important;
        overflow: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        display: block;
    }

    body.hf-visualizer-embed canvas[id^="hf-canvas-"] {
        display: block;
        margin: 0;
    }

    body.hf-visualizer-embed [id^="hf-product-card-"] {
        padding: 12px 14px !important;
        margin-bottom: 12px !important;
    }

    body.hf-visualizer-embed [id^="hf-product-card-"] h4 {
        margin-bottom: 10px !important;
        font-size: 15px !important;
        line-height: 1.3 !important;
    }

    body.hf-visualizer-embed .hf-variations-grid {
        gap: 8px;
        margin-bottom: 12px;
    }

    body.hf-visualizer-embed .hf-tile {
        padding: 10px 12px;
        border-radius: 8px;
        font-size: 13px;
        min-height: 44px;
    }

    body.hf-visualizer-embed [id^="hf-preview-image-"] {
        max-width: 118px !important;
        margin-top: 10px !important;
    }

    body.hf-visualizer-embed [id^="hf-mask-card-"] {
        display: flex;
        flex-direction: column;
    }

    .hf-advanced-panel {
        margin-bottom: 12px;
        border: 1px solid #d7e1eb;
        border-radius: 10px;
        background: linear-gradient(180deg, #f7fafd 0%, #eef4fa 100%);
        overflow: hidden;
    }

    .hf-finetune-wrap {
        width: min(100%, 600px);
        margin: 0 auto 12px;
        padding: 9px;
        border: 1px solid #d8e3ee;
        border-radius: 12px;
        background: #f3f8fd;
    }

    .hf-finetune-label {
        margin: 0 0 5px;
        text-align: left;
        font-size: 12px;
        font-weight: 800;
        color: #355062;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .hf-finetune-help {
        margin: 0 0 7px;
        font-size: 12px;
        color: #52667a;
        line-height: 1.38;
    }

    .hf-finetune-icon,
    .hf-panel-summary-icon,
    .hf-scene-polish-icon,
    .hf-quick-note-icon,
    .hf-workspace-helper-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        line-height: 1;
    }

    .hf-finetune-icon {
        width: 18px;
        height: 18px;
        border-radius: 6px;
        background: rgba(77, 106, 120, 0.12);
        color: #355062;
        font-size: 11px;
    }

    .hf-panel-summary-copy {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        min-width: 0;
    }

    .hf-panel-summary-icon {
        width: 18px;
        height: 18px;
        border-radius: 6px;
        background: rgba(245, 158, 11, 0.14);
        color: #b45309;
        font-size: 12px;
    }

    .hf-advanced-panel summary {
        list-style: none;
        cursor: pointer;
        padding: 9px 11px;
        font-size: 13px;
        font-weight: 700;
        color: var(--hf-text-dark);
        background: #eef4fa;
        border-bottom: 1px dashed transparent;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        user-select: none;
    }

    .hf-advanced-panel summary::-webkit-details-marker {
        display: none;
    }

    .hf-advanced-panel summary::after {
        content: "▾";
        font-size: 16px;
        line-height: 1;
        color: #475569;
        transition: transform 160ms ease, color 160ms ease;
    }

    .hf-advanced-panel[open] summary {
        border-bottom-color: #cbd5e1;
        background: #f1f5f9;
    }

    .hf-advanced-panel[open] summary::after {
        transform: rotate(180deg);
        color: #1e293b;
    }

    .hf-advanced-panel-inner {
        padding: 9px 10px 10px;
    }

    body.hf-visualizer-embed .hf-advanced-panel-inner {
        padding: 9px 10px 10px;
    }

    .hf-card:hover {
        box-shadow: var(--hf-shadow-lg);
        transform: translateY(-2px);
    }

    .hf-card.hf-loading {
        pointer-events: none;
        position: relative;
    }

    .hf-card.hf-loading::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(2px);
        border-radius: var(--hf-radius);
        z-index: 10;
    }

    .hf-step-title {
        font-size: 24px;
        font-weight: 800;
        color: var(--hf-primary);
        margin-top: 0;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        gap: 16px;
        letter-spacing: -0.025em;
    }

    .hf-step-number {
        background: var(--hf-primary);
        color: white;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: 900;
        box-shadow: 0 0 0 4px rgba(77, 106, 120, 0.15);
    }

    .hf-step-desc {
        color: var(--hf-text-muted);
        font-size: 17px;
        margin-bottom: 32px;
        margin-top: 0;
        max-width: 600px;
    }

    /* Buttons */
    .hf-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 10px 16px;
        border-radius: 9px;
        font-weight: 700;
        font-size: 15px;
        cursor: pointer;
        border: none;
        transition: var(--hf-transition);
        text-align: center;
        box-shadow: var(--hf-shadow-sm);
    }

    .hf-btn:active {
        transform: scale(0.98);
    }

    .hf-btn-primary {
        background-color: var(--hf-primary);
        color: #ffffff !important;
    }

    .hf-btn-primary:not(:disabled):hover {
        background-color: var(--hf-primary-dark);
        box-shadow: 0 10px 15px -3px rgba(77, 106, 120, 0.3);
    }

    .hf-btn-success {
        background-color: var(--hf-success);
        color: white;
        font-size: 18px;
        padding: 11px 18px;
        border-radius: 8px;
        box-shadow: 0 10px 20px rgba(16, 185, 129, 0.3);
    }

    .hf-btn-success:not(:disabled):hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 15px 30px rgba(16, 185, 129, 0.4);
    }

    .hf-btn-magic {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        background: linear-gradient(135deg, #8fe3bc 0%, #78dcbc 46%, #5ec9b7 100%);
        border: 1px solid rgba(255, 255, 255, 0.38);
        color: #ffffff !important;
        box-shadow: 0 14px 30px rgba(94, 201, 183, 0.24);
    }

    .hf-btn-magic::before {
        content: "";
        position: absolute;
        inset: -35%;
        z-index: -1;
        background: linear-gradient(120deg, rgba(255, 255, 255, 0) 18%, rgba(255, 255, 255, 0.34) 48%, rgba(255, 255, 255, 0) 78%);
        transform: translateX(-120%);
        animation: hf-magic-sheen 3.2s ease-in-out infinite;
    }

    .hf-btn-magic:not(:disabled):hover {
        transform: translateY(-2px) scale(1.02);
        box-shadow: 0 18px 34px rgba(94, 201, 183, 0.3);
        filter: saturate(1.05);
    }

    .hf-btn-magic:disabled {
        opacity: 0.92;
    }

    @keyframes hf-magic-sheen {
        0% {
            transform: translateX(-120%);
        }

        55%,
        100% {
            transform: translateX(120%);
        }
    }

    /* Product Tiles */
    .hf-variations-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 10px;
        margin-bottom: 22px;
    }

    .hf-tile {
        appearance: none;
        -webkit-appearance: none;
        padding: 11px 14px;
        border: 1px solid #cbd5e1;
        background: #f1f5f9;
        border-radius: 8px;
        cursor: pointer;
        font-size: 14px;
        font-weight: 700;
        color: #32485b;
        transition: var(--hf-transition);
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 44px;
    }

    .hf-tile:hover:not(.hf-tile-has-texture):not(.hf-tile-product-swatch) {
        border-color: #93a8bb;
        background: #e9f0f6;
        transform: translateY(-1px);
    }

    .hf-tile.hf-tile-has-texture:hover {
        transform: translateY(-1px);
        filter: brightness(1.04);
    }

    .hf-tile.active:not(.hf-tile-has-texture):not(.hf-tile-product-swatch) {
        border-color: var(--hf-primary);
        background: #f0f4f8;
        color: var(--hf-primary-dark);
        box-shadow: 0 0 0 2px rgba(77, 106, 120, 0.16);
        position: relative;
    }

    .hf-tile.active.hf-tile-has-texture {
        position: relative;
    }

    .hf-tile.active::after {
        content: "✓";
        position: absolute;
        top: -8px;
        right: -8px;
        background: var(--hf-primary);
        color: white;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
    }

    .hf-tile.hf-tile-product-swatch.active::after {
        background: var(--hf-success);
        z-index: 2;
    }

    /* Alert / Smart Check */
    .hf-alert {
        background: #fffdf2;
        border: 2px solid var(--hf-accent);
        border-radius: 16px;
        padding: 24px;
        margin: 32px 0;
        box-shadow: var(--hf-shadow-md);
        display: flex;
        gap: 20px;
        align-items: flex-start;
    }

    .hf-alert-icon {
        font-size: 32px;
        line-height: 1;
    }

    /* Comparison Slider */
    .hf-comparison-container {
        border-radius: var(--hf-radius);
        overflow: hidden;
        border: 1px solid var(--hf-border);
        box-shadow: var(--hf-shadow-lg);
        position: relative;
    }

    /* Animations */
    @keyframes hf-heartbeat {
        0% {
            transform: scale(1);
        }

        50% {
            transform: scale(1.05);
        }

        100% {
            transform: scale(1);
        }
    }

    .hf-generating-pulse {
        animation: hf-heartbeat 1.5s infinite ease-in-out;
    }

    .hf-card.hf-loading-area {
        border-color: #bfd0dc;
        box-shadow: 0 14px 28px rgba(77, 106, 120, 0.16);
    }

    .hf-comparison-container.is-loading {
        box-shadow: 0 14px 30px rgba(77, 106, 120, 0.22);
    }

    .hf-comparison-container.is-loading::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 4;
        pointer-events: none;
        background:
            radial-gradient(circle at 50% 16%, rgba(191, 219, 254, 0.34) 0%, rgba(191, 219, 254, 0.06) 34%, rgba(191, 219, 254, 0) 54%),
            linear-gradient(180deg, rgba(8, 20, 31, 0.16) 0%, rgba(8, 20, 31, 0.34) 100%),
            repeating-linear-gradient(90deg, rgba(77, 106, 120, 0.38) 0 8px, rgba(77, 106, 120, 0.12) 8px 38px);
        opacity: 0.62;
        animation: hf-skeleton-pulse 1.7s ease-in-out infinite;
    }

    .hf-comparison-container.is-loading::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 5;
        pointer-events: none;
        background: linear-gradient(110deg, rgba(255, 255, 255, 0) 12%, rgba(255, 255, 255, 0.45) 48%, rgba(255, 255, 255, 0) 82%);
        transform: translateX(-115%);
        animation: hf-skeleton-shimmer 1.9s linear infinite;
    }

    .hf-reveal-overlay {
        position: absolute;
        inset: 0;
        z-index: 24;
        display: flex;
        align-items: flex-end;
        justify-content: center;
        padding: 14px;
        background:
            radial-gradient(circle at 50% 12%, rgba(125, 211, 252, 0.34) 0%, rgba(125, 211, 252, 0) 44%),
            linear-gradient(180deg, rgba(8, 20, 31, 0.14) 0%, rgba(8, 20, 31, 0.46) 100%);
        opacity: 0;
        transition: opacity 240ms ease;
        pointer-events: none;
        overflow: hidden;
    }

    .hf-reveal-overlay::before {
        content: "";
        position: absolute;
        inset: -25%;
        background: radial-gradient(circle, rgba(226, 232, 240, 0.28) 0%, rgba(226, 232, 240, 0) 62%);
        animation: hf-reveal-aura 2.6s ease-in-out infinite;
    }

    .hf-reveal-overlay.is-visible {
        opacity: 1;
    }

    .hf-reveal-pill {
        position: relative;
        z-index: 2;
        min-width: 320px;
        max-width: min(92%, 560px);
        background: rgba(15, 23, 42, 0.76);
        border: 1px solid rgba(226, 232, 240, 0.36);
        border-radius: 18px;
        padding: 12px 16px 10px;
        color: #f8fafc;
        text-align: center;
        backdrop-filter: blur(4px);
        box-shadow: 0 12px 28px rgba(2, 6, 23, 0.35);
    }

    .hf-reveal-title {
        font-size: 15px;
        font-weight: 800;
        margin-bottom: 4px;
        letter-spacing: 0.2px;
    }

    .hf-reveal-phase {
        font-size: 12px;
        color: #dbeafe;
        margin-bottom: 8px;
    }

    .hf-reveal-progress {
        width: 100%;
        height: 8px;
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.36);
        overflow: hidden;
    }

    .hf-reveal-progress-bar {
        display: block;
        width: 0%;
        height: 100%;
        border-radius: inherit;
        background: linear-gradient(90deg, #93c5fd 0%, #bfdbfe 40%, #f0f9ff 100%);
        transition: width 420ms ease;
    }

    .hf-reveal-progress-text {
        margin-top: 6px;
        font-size: 11px;
        font-weight: 700;
        color: #bfdbfe;
    }

    .hf-reveal-scan {
        position: absolute;
        inset: 0;
        background: linear-gradient(110deg,
                rgba(255, 255, 255, 0) 0%,
                rgba(255, 255, 255, 0.34) 50%,
                rgba(255, 255, 255, 0) 100%);
        transform: translateX(-120%);
        animation: hf-reveal-scan 1.9s linear infinite;
    }

    /* Slider-UI (haandtag + FOER/EFTER-tags) skjules under generering -
       foer/efter giver foerst mening naar resultatet findes (Kenni 08-08) */
    .hf-comparison-container.is-loading .hf-slider-handle,
    .hf-comparison-container.is-loading [class*="hf-ba-tag"] {
        opacity: 0 !important;
        visibility: hidden !important;
    }

    @keyframes hf-reveal-scan {
        to {
            transform: translateX(120%);
        }
    }

    @keyframes hf-reveal-aura {
        0%, 100% {
            opacity: 0.2;
            transform: scale(1);
        }
        50% {
            opacity: 0.55;
            transform: scale(1.03);
        }
    }

    @keyframes hf-slider-glow {
        0%, 100% {
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
        }
        50% {
            box-shadow: 0 0 18px rgba(147, 197, 253, 0.95);
        }
    }

    @keyframes hf-slider-bloom {
        0%, 100% {
            opacity: 0.45;
            transform: translate(-50%, -50%) scale(0.94);
        }
        50% {
            opacity: 0.95;
            transform: translate(-50%, -50%) scale(1.04);
        }
    }

    @keyframes hf-skeleton-pulse {
        0%, 100% {
            opacity: 0.52;
        }
        50% {
            opacity: 0.74;
        }
    }

    @keyframes hf-skeleton-shimmer {
        to {
            transform: translateX(115%);
        }
    }

    /* Restored Comparison Slider Styles */
    .hf-slider-input {
        position: absolute;
        inset: 0;
        z-index: 30;
        opacity: 0;
        cursor: ew-resize;
        width: 100%;
        height: 100%;
        margin: 0;
    }

    .hf-slider-handle {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 50%;
        width: 2px;
        background: white;
        z-index: 31;
        pointer-events: none;
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
        transform: translateX(-50%);
    }

    .hf-result-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        align-items: center;
        justify-content: center;
    }

    .hf-result-actions-primary {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .hf-result-actions-secondary {
        width: 100%;
        display: flex;
        gap: 10px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .hf-result-actions-tertiary {
        width: 100%;
        display: flex;
        gap: 12px;
        justify-content: center;
        flex-wrap: wrap;
        margin-top: 2px;
    }

    .hf-result-disclaimer {
        margin: 10px 0 0;
        text-align: center;
        font-size: 12px;
        color: #64748b;
        line-height: 1.45;
    }

    .hf-btn-lead {
        background: linear-gradient(135deg, #0f766e, #0f766e 58%, #115e59);
        border: 1px solid #0f766e;
        color: #ffffff;
    }

    .hf-btn-lead-primary {
        font-size: 16px;
        font-weight: 800;
        padding: 12px 18px;
        border-radius: 8px;
        box-shadow: 0 12px 24px rgba(15, 118, 110, 0.24);
    }

    .hf-btn-lead:hover {
        background: linear-gradient(135deg, #115e59, #0f766e 58%, #134e4a);
        color: #ffffff;
        box-shadow: 0 10px 22px rgba(15, 118, 110, 0.24);
    }

    .hf-lead-capture {
        margin-top: 14px;
        padding: 14px;
        border: 1px solid #cbd5e1;
        border-radius: 12px;
        background: #f8fafc;
    }

    .hf-lead-capture.is-hidden {
        display: none;
    }

    .hf-lead-capture.is-disabled {
        opacity: 0.75;
    }

    .hf-lead-capture.is-disabled .hf-lead-input,
    .hf-lead-capture.is-disabled .hf-lead-consent input,
    .hf-lead-capture.is-disabled .hf-btn {
        cursor: not-allowed;
    }

    .hf-lead-title {
        margin: 0;
        font-size: 16px;
        font-weight: 800;
        color: var(--hf-primary);
    }

    .hf-lead-sub {
        margin: 4px 0 0;
        font-size: 13px;
        color: var(--hf-text-muted);
    }

    .hf-lead-grid {
        margin-top: 10px;
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .hf-lead-input {
        width: 100%;
        border: 1px solid #cbd5e1;
        border-radius: 9px;
        padding: 10px 11px;
        font-size: 14px;
        color: #1e293b;
        background: #ffffff;
    }

    .hf-lead-input:focus {
        outline: none;
        border-color: #4d6a78;
        box-shadow: 0 0 0 3px rgba(77, 106, 120, 0.18);
    }

    .hf-share-sheet {
        margin-top: 10px;
        padding: 12px;
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        background: linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
        box-shadow: 0 10px 20px rgba(77, 106, 120, 0.08);
    }

    .hf-share-sheet.is-hidden {
        display: none;
    }

    .hf-share-sheet-title {
        margin: 0;
        font-size: 12px;
        font-weight: 800;
        color: #55697b;
        letter-spacing: 0.03em;
        text-transform: uppercase;
    }

    .hf-share-sheet-sub {
        margin: 5px 0 0;
        font-size: 12px;
        line-height: 1.42;
        color: #64748b;
    }

    .hf-share-sheet-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-top: 10px;
    }

    .hf-share-sheet-btn {
        width: 100%;
        min-width: 0;
        padding: 10px 11px;
        border-radius: 11px;
        border: 1px solid #d4e0ea;
        background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%);
        color: #355062;
        font-size: 13px;
        font-weight: 700;
        box-shadow: 0 8px 18px rgba(77, 106, 120, 0.08);
    }

    .hf-share-sheet-btn .hf-btn-inline-icon {
        width: 18px;
        min-width: 18px;
        color: #355062;
    }

    .hf-share-sheet-btn .hf-btn-inline-icon svg {
        display: block;
        width: 16px;
        height: 16px;
        fill: currentColor;
        stroke: currentColor;
        stroke-width: 0;
    }

    .hf-share-sheet-btn:hover {
        background: linear-gradient(180deg, #fbfdff 0%, #eef5fb 100%);
        border-color: #aec1d0;
        color: #233844;
    }

    .hf-share-sheet-status {
        margin: 10px 0 0;
        font-size: 12px;
        line-height: 1.42;
        color: #64748b;
    }

    .hf-share-sheet-status:empty {
        display: none;
    }

    .hf-share-sheet-status.is-success {
        color: #065f46;
    }

    .hf-share-sheet-status.is-error {
        color: #9a3412;
    }

    .hf-lead-consent {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        margin: 10px 0;
        font-size: 12px;
        color: #475569;
    }

    .hf-lead-consent input {
        margin-top: 2px;
    }

    .hf-lead-actions {
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
    }

    .hf-lead-status {
        font-size: 13px;
        color: #64748b;
    }

    .hf-lead-status.is-error {
        color: #b91c1c;
    }

    .hf-lead-status.is-success {
        color: #065f46;
    }

    .hf-btn-action-primary {
        display: flex;
        width: min(100%, 400px);
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
        border-radius: 8px;
    }

    .hf-result-actions .hf-btn-action-primary {
        flex: 0 1 400px;
    }

    .hf-btn-result-secondary {
        background: #ffffff;
        border: 1px solid #8ea6ba;
        color: #355062;
        box-shadow: none;
        border-radius: 8px;
        min-width: 168px;
        padding: 9px 13px;
    }

    .hf-btn-result-secondary:hover {
        background: #f8fafc;
        border-color: #6f8aa0;
        color: #1f3440;
    }

    .hf-btn-result-link {
        background: transparent;
        border: none;
        box-shadow: none;
        color: #52667a;
        text-decoration: underline;
        text-underline-offset: 3px;
        font-size: 13px;
        padding: 4px 8px;
    }

    .hf-btn-result-link:hover {
        color: #1f3440;
        background: transparent;
    }

    .hf-btn-undo {
        border-color: #4d6a78 !important;
        color: #1f3440 !important;
        background: #f8fbff !important;
        box-shadow: 0 0 0 3px rgba(77, 106, 120, 0.12);
        font-weight: 800;
    }

    .hf-canvas-zoom-badge {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 24;
        display: none;
        min-width: 72px;
        text-align: center;
        padding: 6px 8px;
        border-radius: 8px;
        background: rgba(15, 23, 42, 0.85);
        border: 1px solid rgba(226, 232, 240, 0.4);
        color: #f8fafc;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.02em;
        box-shadow: 0 8px 16px rgba(2, 6, 23, 0.28);
        pointer-events: none;
    }

    .hf-canvas-zoom-badge.is-visible {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .hf-generate-sticky {
        position: sticky;
        bottom: calc(8px + env(safe-area-inset-bottom, 0px) + var(--hf-keyboard-offset, 0px));
        z-index: 32;
        padding: 10px 0 2px;
        margin-top: 10px;
        display: flex;
        justify-content: center;
        background: linear-gradient(180deg, rgba(248, 250, 252, 0) 0%, rgba(248, 250, 252, 0.96) 34%, #f8fafc 100%);
    }

    body.hf-visualizer-embed .hf-generate-sticky {
        bottom: calc(6px + env(safe-area-inset-bottom, 0px) + var(--hf-keyboard-offset, 0px));
        padding-top: 8px;
    }

    .hf-btn-shake {
        animation: hf-btn-shake-x 320ms linear;
    }

    @keyframes hf-btn-shake-x {
        0% { transform: translateX(0); }
        20% { transform: translateX(-7px); }
        40% { transform: translateX(7px); }
        60% { transform: translateX(-5px); }
        80% { transform: translateX(5px); }
        100% { transform: translateX(0); }
    }

    .hf-upload-photo-examples {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 10px;
    }

    .hf-upload-photo-card {
        border: 1px solid #d7e3ef;
        border-radius: 10px;
        background: #ffffff;
        padding: 8px;
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .hf-upload-photo-card.is-good {
        border-color: #bbf7d0;
        background: #f0fdf4;
    }

    .hf-upload-photo-card.is-bad {
        border-color: #fecaca;
        background: #fef2f2;
    }

    .hf-upload-photo-thumb {
        width: 72px;
        height: 46px;
        border-radius: 8px;
        border: 1px solid rgba(15, 23, 42, 0.12);
        position: relative;
        overflow: hidden;
        flex: 0 0 72px;
        background: linear-gradient(180deg, #9ed5ff 0%, #d4ebff 42%, #9cc089 42%, #6e9b5f 100%);
    }

    .hf-upload-photo-thumb::before {
        content: "";
        position: absolute;
        left: -8%;
        right: -8%;
        bottom: 18%;
        height: 11px;
        background: #2f4958;
        border-radius: 6px;
    }

    .hf-upload-photo-thumb::after {
        content: "";
        position: absolute;
        left: 48%;
        bottom: 14%;
        width: 4px;
        height: 18px;
        border-radius: 4px;
        background: #1f3440;
    }

    .hf-upload-photo-card.is-bad .hf-upload-photo-thumb {
        filter: grayscale(0.52) contrast(0.85) brightness(0.84);
    }

    .hf-upload-photo-badge {
        position: absolute;
        top: 4px;
        right: 4px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        font-weight: 800;
        background: #ffffff;
    }

    .hf-upload-photo-card.is-good .hf-upload-photo-badge {
        color: #16a34a;
    }

    .hf-upload-photo-card.is-bad .hf-upload-photo-badge {
        color: #dc2626;
    }

    .hf-upload-photo-copy {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .hf-upload-photo-copy strong {
        font-size: 13px;
        color: #1f3440;
    }

    .hf-upload-photo-copy span {
        font-size: 12px;
        color: #52667a;
        line-height: 1.3;
    }

    .hf-upload-preview-stage {
        display: none;
        margin-top: 14px;
        padding: 12px;
        border: 1px solid #d5e1ec;
        border-radius: 12px;
        background: #ffffff;
        box-shadow: var(--hf-shadow-sm);
    }

    .hf-upload-preview-stage.is-visible {
        display: block;
    }

    .hf-upload-preview-image {
        display: block;
        width: 100%;
        max-height: min(52vh, 560px);
        object-fit: contain;
        border-radius: 12px;
        border: 1px solid #dbe7f1;
        background: #edf3f9;
    }

    .hf-upload-preview-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 12px;
    }

    .hf-upload-preview-copy {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .hf-upload-preview-copy strong {
        font-size: 15px;
        color: #1f3440;
    }

    .hf-upload-preview-copy span {
        font-size: 13px;
        color: #5b7082;
        line-height: 1.4;
    }

    .hf-upload-preview-change {
        flex: 0 0 auto;
    }

    @media (max-width: 720px) {
        .hf-upload-photo-examples {
            grid-template-columns: 1fr;
        }

        .hf-upload-preview-meta {
            align-items: stretch;
        }

        .hf-upload-preview-change {
            width: 100%;
        }
    }

    @media (max-width: 860px) {
        .hf-lead-grid {
            grid-template-columns: 1fr;
        }
    }

    .hf-tool-btn {
        background: #ffffff;
        border: 1px solid #cbd5e1;
        color: #334155;
        padding: 7px 11px;
        font-size: 13px;
        border-radius: 8px;
        box-shadow: none;
    }

    .hf-tool-btn.is-active {
        background: var(--hf-primary);
        border-color: var(--hf-primary);
        color: #ffffff;
        box-shadow: 0 0 0 3px rgba(77, 106, 120, 0.16);
    }

    .hf-tool-mini-btn {
        background: #ffffff;
        border: 1px solid #cbd5e1;
        color: #334155;
        padding: 6px 10px;
        min-width: 40px;
        font-size: 13px;
        border-radius: 8px;
        box-shadow: none;
    }

    .hf-zoom-label {
        min-width: 52px;
        text-align: center;
        font-weight: 700;
        color: var(--hf-primary);
        font-size: 14px;
    }

    .hf-quick-note-btn {
        background: #ffffff;
        border: 1px solid #cbd5e1;
        color: #334155;
        padding: 6px 9px;
        font-size: 12px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        border-radius: 999px;
        line-height: 1.2;
        white-space: nowrap;
    }

    .hf-quick-note-btn.is-active {
        background: #ecfdf5;
        border-color: #10b981;
        color: #065f46;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
    }

    .hf-step-inline-actions {
        margin-top: 14px;
        display: flex;
        justify-content: flex-end;
        gap: 10px;
        flex-wrap: wrap;
    }


    .hf-app-container.hf-flow-shortcode-scroll .hf-step1-main-card {
        display: flex;
        flex-direction: column;
        gap: 18px;
    }

    .hf-shortcode-subsection {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-bottom: 12px;
    }

    .hf-shortcode-subsection-title {
        margin: 0;
        font-size: 21px;
        line-height: 1.2;
        font-weight: 800;
        color: var(--hf-primary);
        letter-spacing: -0.02em;
    }

    .hf-shortcode-subsection-desc {
        margin: 0;
        font-size: 15px;
        line-height: 1.5;
        color: var(--hf-text-muted);
    }

    .hf-shortcode-step1-product-slot {
        display: flex;
        flex-direction: column;
        gap: 14px;
    }

    .hf-shortcode-step1-actions {
        display: flex;
        justify-content: center;
        padding-top: 4px;
    }

    .hf-shortcode-step1-actions .hf-btn-action-primary {
        width: min(100%, 400px);
        max-width: 400px;
    }

    .hf-shortcode-stepper-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin-top: 14px;
    }

    .hf-shortcode-stepper-footer .hf-btn-action-primary,
    .hf-shortcode-stepper-footer .hf-btn-result-secondary {
        width: min(100%, 400px);
        max-width: 400px;
    }

    .hf-shortcode-stepper-footer .hf-step-footer-status {
        max-width: 400px;
        padding: 0;
        text-align: center;
    }

    .hf-shortcode-upload-shell {
        transition: opacity 180ms ease, filter 180ms ease, transform 180ms ease;
    }

    .hf-app-container.hf-flow-shortcode-scroll .hf-step1-main-card.is-upload-locked .hf-shortcode-upload-shell {
        opacity: 0.56;
        filter: grayscale(0.24);
    }

    .hf-app-container.hf-flow-shortcode-scroll .hf-step1-main-card.is-upload-locked [id^="hf-drop-zone-"] {
        pointer-events: none;
    }

    .hf-app-container.hf-flow-shortcode-scroll [id^="hf-product-card-"] {
        padding: 24px 26px;
        margin-bottom: 0;
        box-shadow: var(--hf-shadow-sm);
    }

    .hf-app-container.hf-flow-shortcode-scroll [id^="hf-product-card-"] .hf-step-product-name {
        margin-bottom: 18px !important;
        font-size: 18px !important;
        line-height: 1.3 !important;
    }

    .hf-app-container.hf-flow-shortcode-scroll [id^="hf-product-card-"] .hf-step-inline-actions {
        display: none;
    }

    .hf-app-container.hf-flow-shortcode-scroll [id^="hf-step-2-wrapper-"] {
        display: flex;
        flex-direction: column;
        gap: 18px;
        align-items: stretch;
    }

    .hf-app-container.hf-flow-shortcode-scroll [id^="hf-step-2-wrapper-"] [id^="hf-mask-card-"] {
        order: 1 !important;
    }

    .hf-app-container.hf-flow-shortcode-scroll [id^="hf-step-2-wrapper-"] [id^="hf-step-sidebar-"] {
        order: 2 !important;
    }

    .hf-app-container.hf-flow-shortcode-scroll [id^="hf-step-2-wrapper-"].is-shortcode-wide {
        display: grid !important;
        grid-template-columns: minmax(0, 1.86fr) minmax(300px, 1fr) !important;
        align-items: start !important;
        gap: 20px !important;
    }

    .hf-app-container.hf-flow-shortcode-scroll [id^="hf-step-2-wrapper-"].is-shortcode-wide [id^="hf-mask-card-"] {
        order: 1 !important;
    }

    .hf-app-container.hf-flow-shortcode-scroll [id^="hf-step-2-wrapper-"].is-shortcode-wide [id^="hf-step-sidebar-"] {
        order: 2 !important;
    }

    .hf-app-container.hf-flow-shortcode-scroll [id^="hf-mask-card-"] .hf-step3-layout {
        display: block;
    }

    .hf-app-container.hf-flow-shortcode-scroll [id^="hf-mask-card-"] .hf-step3-controls-col {
        display: none;
    }

    .hf-app-container.hf-flow-shortcode-scroll .hf-workspace-toolbar-slot {
        display: block;
        margin-bottom: 12px;
    }

    .hf-app-container.hf-flow-shortcode-scroll .hf-workspace-tools-slot {
        display: none;
    }

    .hf-app-container.hf-flow-shortcode-scroll .hf-canvas-stage {
        height: var(--hf-shortcode-stage-height, 420px);
        min-height: 260px;
        max-height: var(--hf-shortcode-stage-height, 420px);
        touch-action: none;
    }

    .hf-app-container.hf-flow-shortcode-scroll .hf-canvas-stage canvas {
        touch-action: none;
    }

    .hf-app-container.hf-flow-shortcode-scroll [id^="brush-controls-"] {
        display: flex;
        flex-wrap: wrap !important;
        align-items: center;
        justify-content: flex-start !important;
        gap: 10px !important;
    }

    .hf-app-container.hf-flow-shortcode-scroll [id^="brush-controls-"] > div {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
    }

    .hf-app-container.hf-flow-shortcode-scroll .hf-step2-support-card .hf-step-title {
        margin-bottom: 8px;
    }

    .hf-app-container.hf-flow-shortcode-scroll .hf-step2-support-card .hf-step-desc {
        margin-bottom: 18px;
    }

    .hf-app-container.hf-flow-shortcode-scroll .hf-step2-support-card {
        scroll-margin-top: 22px;
    }

    .hf-app-container.hf-flow-shortcode-scroll .hf-generate-sticky {
        position: static;
        bottom: auto;
        background: none;
        padding: 0;
        margin-top: 14px;
    }

    .hf-shortcode-generate-footer {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .hf-shortcode-generate-footer .hf-btn-action-primary {
        width: min(100%, 400px);
    }

    .hf-step2-jump-btn {
        display: none;
        width: min(100%, 400px);
        max-width: 400px;
    }

    .hf-step2-jump-btn.is-visible {
        display: inline-flex;
    }

    @media (max-width: 980px) {
        .hf-app-container.hf-flow-shortcode-scroll [id^="hf-product-card-"] {
            padding: 20px;
        }

        .hf-shortcode-subsection-title {
            font-size: 19px;
        }
    }

    .hf-step-footer-status {
        margin-top: 8px;
        padding: 0 8px;
        text-align: center;
        font-size: 12px;
        line-height: 1.35;
    }

    .hf-app-container.hf-step-mode [id^="hf-product-card-"] {
        display: flex;
        flex-direction: column;
    }

    .hf-app-container.hf-step-mode [id^="hf-product-card-"] .hf-step-inline-actions {
        margin-top: auto;
        padding-top: 14px;
        justify-content: center;
    }

    .hf-step-title-copy {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .hf-inline-tip {
        position: relative;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        border: 1px solid #9fb3c4;
        background: #eef4fa;
        color: #3f5b6e;
        font-size: 12px;
        font-weight: 800;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        cursor: help;
        flex: 0 0 auto;
    }

    .hf-inline-tip-bubble {
        position: absolute;
        top: calc(100% + 8px);
        left: -2px;
        width: min(360px, 82vw);
        padding: 10px 12px;
        border-radius: 10px;
        border: 1px solid #c8d6e3;
        background: rgba(15, 23, 42, 0.95);
        color: #f8fafc;
        font-size: 12px;
        font-weight: 600;
        line-height: 1.4;
        box-shadow: 0 12px 28px rgba(2, 6, 23, 0.32);
        opacity: 0;
        transform: translateY(-4px);
        pointer-events: none;
        transition: opacity 150ms ease, transform 150ms ease;
        z-index: 55;
    }

    .hf-inline-tip:hover .hf-inline-tip-bubble,
    .hf-inline-tip:focus .hf-inline-tip-bubble,
    .hf-inline-tip:focus-within .hf-inline-tip-bubble {
        opacity: 1;
        transform: translateY(0);
    }

    .hf-canvas-stage {
        position: relative;
        width: 100%;
        min-height: 360px;
        height: min(72vh, 820px);
        background: linear-gradient(180deg, #eef4fa 0%, #e8f0f7 100%);
        border-radius: var(--hf-radius);
        overflow: auto;
        border: 1px solid var(--hf-border);
        overscroll-behavior: contain;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        padding: 6px;
    }

    .hf-canvas-stage canvas {
        touch-action: none;
        position: relative;
        z-index: 10;
        display: block;
        width: auto;
        max-width: none;
        height: auto;
    }

    .hf-canvas-stage > [id^="hf-canvas-instruction-"] {
        max-width: min(84%, 430px);
        text-align: center;
        font-size: 13px !important;
        line-height: 1.35;
        padding: 8px 14px !important;
    }

    .hf-step3-layout {
        display: grid;
        grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr);
        gap: 14px;
        align-items: stretch;
    }

    .hf-step3-canvas-col {
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
        flex: 1 1 auto;
    }

    .hf-step3-controls-col {
        min-width: 0;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .hf-step3-controls-col .hf-tool-panel {
        margin-bottom: 0 !important;
        justify-content: flex-start !important;
    }

    .hf-step3-controls-col .hf-finetune-wrap {
        width: 100%;
        margin: 0;
    }

    .hf-step3-controls-col .hf-generate-sticky {
        position: sticky;
        bottom: 0;
        margin-top: auto;
    }

    .hf-step4-stack {
        width: min(100%, 760px);
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .hf-quick-tags-row {
        display: flex;
        gap: 6px;
        flex-wrap: wrap;
        margin-top: 8px;
    }

    .hf-workspace-tools-slot {
        width: 100%;
        margin-bottom: 0;
    }

    .hf-workspace-toolbar-slot {
        display: none;
        width: 100%;
        margin-bottom: 0;
    }

    .hf-marking-continue-wrap {
        display: none;
        padding-top: 10px;
    }

    .hf-marking-continue-wrap[hidden] {
        display: none !important;
    }

    .hf-marking-continue-btn {
        width: 100%;
        border: 1px solid rgba(16, 185, 129, 0.32);
        background: linear-gradient(135deg, #10b981 0%, #5bd7c6 100%);
        color: #ffffff !important;
        font-weight: 800;
        box-shadow: 0 10px 24px rgba(16, 185, 129, 0.2);
    }

    .hf-workspace-helper {
        margin: 0;
        padding: 8px 10px;
        border: 1px solid #d8e3ee;
        border-radius: 10px;
        background: linear-gradient(180deg, #f8fbff 0%, #f1f6fb 100%);
        font-size: 12px;
        line-height: 1.38;
        color: #5d7183;
        display: flex;
        align-items: flex-start;
        gap: 8px;
    }

    .hf-workspace-helper-icon {
        width: 18px;
        height: 18px;
        margin-top: 1px;
        border-radius: 50%;
        background: rgba(245, 158, 11, 0.14);
        color: #b45309;
        font-size: 11px;
        font-weight: 800;
    }

    .hf-scene-polish-option {
        display: flex;
        gap: 8px;
        align-items: flex-start;
        font-size: 13px;
        color: #334155;
        cursor: pointer;
    }

    .hf-scene-polish-copy {
        line-height: 1.42;
    }

    .hf-scene-polish-copy strong {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin-bottom: 2px;
        font-size: 13px;
        color: #334155;
    }

    .hf-scene-polish-icon {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: rgba(250, 204, 21, 0.16);
        color: #b45309;
        font-size: 11px;
    }

    .hf-workspace-status {
        margin: 0;
        font-size: 13px;
        font-weight: 700;
        line-height: 1.35;
        color: var(--hf-text-muted);
        text-align: left;
    }

    .hf-result-actions-wrap {
        width: min(100%, 980px);
        margin: 0 auto;
        padding: 10px 12px;
        border-radius: 12px;
        border: 1px solid #dbe4ee;
        background: rgba(255, 255, 255, 0.92);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    }

    .hf-btn-inline-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 16px;
        min-width: 16px;
        font-size: 13px;
        line-height: 1;
    }

    .hf-feedback-lite {
        margin-top: 10px;
        padding: 12px;
        border: 1px solid #dbe4ee;
        border-radius: 14px;
        background: linear-gradient(180deg, #fbfdff 0%, #eef5fb 100%);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
        font-size: 12px;
        color: #64748b;
    }

    .hf-feedback-lite-title {
        margin: 0 0 5px;
        font-weight: 800;
        font-size: 13px;
        color: #41586a;
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .hf-feedback-lite-sub {
        margin: 0 0 10px;
        font-size: 12px;
        color: #5f7386;
        line-height: 1.45;
    }

    .hf-feedback-lite-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
        margin-bottom: 8px;
    }

    .hf-feedback-lite-status {
        margin: 0 0 8px;
        font-size: 12px;
        line-height: 1.45;
        color: var(--hf-text-muted);
    }

    .hf-feedback-lite-status:empty {
        display: none;
    }

    .hf-active-corrections {
        margin-top: 10px;
        padding: 10px 11px;
        border: 1px dashed #cbd5e1;
        border-radius: 12px;
        background: rgba(248, 251, 255, 0.94);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78);
    }

    .hf-active-corrections.is-hidden {
        display: none;
    }

    .hf-active-corrections-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        flex-wrap: wrap;
    }

    .hf-active-corrections-title {
        margin: 0;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        font-weight: 800;
        color: #41586a;
    }

    .hf-active-corrections-icon {
        width: 18px;
        height: 18px;
        border-radius: 50%;
        background: rgba(77, 106, 120, 0.12);
        color: #355062;
        font-size: 11px;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

    .hf-active-corrections-sub {
        margin: 4px 0 0;
        font-size: 11px;
        line-height: 1.45;
        color: #64748b;
    }

    .hf-active-corrections-clear {
        border: 1px solid #d7e1eb;
        background: #ffffff;
        color: #5c7184;
        padding: 5px 9px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 700;
        line-height: 1;
        box-shadow: 0 4px 10px rgba(15, 23, 42, 0.05);
    }

    .hf-active-corrections-list {
        list-style: none;
        padding: 0;
        margin: 8px 0 0;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    .hf-active-corrections-item {
        display: flex;
        align-items: flex-start;
        gap: 7px;
        font-size: 12px;
        line-height: 1.42;
        color: #465d70;
    }

    .hf-active-corrections-item-index {
        width: 18px;
        min-width: 18px;
        height: 18px;
        margin-top: 1px;
        border-radius: 50%;
        background: rgba(16, 185, 129, 0.12);
        color: #0f766e;
        font-size: 10px;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
    }

    .hf-active-corrections-item-text {
        min-width: 0;
    }

    .hf-feedback-lite-cta-row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
        align-items: center;
    }

    .hf-feedback-lite-title .hf-panel-summary-icon {
        background: rgba(77, 106, 120, 0.12);
        color: #355062;
    }

    .hf-feedback-lite-btn {
        justify-content: center;
        min-height: 46px;
        padding: 9px 11px;
        border-radius: 12px;
        font-size: 12px;
        font-weight: 700;
        line-height: 1.25;
        text-align: center;
    }

    .hf-feedback-lite-btn-good {
        background: #ecfdf5;
        border: 1px solid #10b981;
        color: #065f46;
    }

    .hf-feedback-lite-btn-bad {
        background: #fff7ed;
        border: 1px solid #fb923c;
        color: #9a3412;
    }

    .hf-feedback-send-btn {
        margin-top: 8px;
        background: #fff;
        border: 1px solid #fb923c;
        color: #9a3412;
        padding: 8px 12px;
    }

    .hf-feedback-quick-btn {
        margin-top: 8px;
        background: linear-gradient(135deg, #4d6a78 0%, #5f8394 100%);
        border: 1px solid rgba(77, 106, 120, 0.2);
        color: #ffffff;
        padding: 8px 12px;
        box-shadow: 0 10px 20px rgba(77, 106, 120, 0.16);
    }

    .hf-feedback-quick-btn:hover {
        background: linear-gradient(135deg, #587684 0%, #6a8d9e 100%);
        color: #ffffff;
    }

    .hf-feedback-lite-hint {
        margin: 8px 0 0;
        font-size: 11px;
        line-height: 1.42;
        color: #64748b;
    }

    .hf-feedback-comment {
        width: 100%;
        margin-top: 8px;
        border: 1px solid var(--hf-border);
        border-radius: 10px;
        padding: 9px 10px;
        font-size: 13px;
        line-height: 1.45;
        color: #334155;
        background: #ffffff;
        resize: vertical;
        min-height: 88px;
        box-sizing: border-box;
    }

    .hf-result-summary {
        margin-bottom: 12px;
        padding: 12px;
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        background: linear-gradient(180deg, #f8fbff 0%, #f1f6fb 100%);
    }

    .hf-result-summary-eyebrow {
        margin: 0 0 7px;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: #64748b;
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }

    .hf-result-summary-name {
        margin: 0;
        font-size: 14px;
        line-height: 1.35;
        font-weight: 800;
        color: var(--hf-primary);
    }

    .hf-result-summary-selection {
        margin: 7px 0 0;
        font-size: 13px;
        font-weight: 700;
        color: var(--hf-success);
    }

    .hf-result-summary-gate {
        display: none;
        margin: 6px 0 0;
        font-size: 12px;
        line-height: 1.35;
        font-weight: 800;
        color: #36566a;
    }

    .hf-result-summary-image {
        display: none;
        width: 100%;
        max-width: 112px;
        margin-top: 8px;
        border-radius: 10px;
        border: 1px solid var(--hf-border);
        box-shadow: var(--hf-shadow-md);
    }

    .hf-result-summary-eyebrow .hf-panel-summary-icon {
        background: rgba(77, 106, 120, 0.12);
        color: #355062;
    }

    .hf-gate-match-wrap {
        display: none;
        padding: 12px;
        border: 1px solid #dbe4ee;
        border-radius: 12px;
        background: linear-gradient(180deg, #f8fbff 0%, #f1f6fb 100%);
    }

    .hf-gate-match-wrap.is-visible {
        display: block;
    }

    .hf-gate-match-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 10px;
    }

    .hf-gate-match-title {
        margin: 0;
        font-size: 13px;
        font-weight: 900;
        color: var(--hf-primary);
    }

    .hf-gate-match-sub {
        margin: 3px 0 0;
        font-size: 12px;
        line-height: 1.35;
        color: #64748b;
    }

    .hf-gate-options {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
    }

    .hf-gate-option {
        min-height: 42px;
        padding: 9px 10px;
        border: 1px solid var(--hf-border);
        border-radius: 10px;
        background: #ffffff;
        color: var(--hf-text-dark);
        font-size: 12px;
        font-weight: 900;
        cursor: pointer;
        transition: var(--hf-transition);
    }

    .hf-gate-option.is-active {
        border-color: var(--hf-success);
        background: #dcfce7;
        color: #14532d;
        box-shadow: inset 0 0 0 2px var(--hf-success);
    }

    .hf-gate-option[hidden] {
        display: none !important;
    }

    .hf-gate-match-note {
        margin: 9px 0 0;
        font-size: 12px;
        line-height: 1.4;
        color: #52677a;
    }


    .hf-app-container.hf-step-mode .hf-card.hf-step2-mask-card .hf-step3-controls-col {
        overflow: visible;
        padding-right: 2px;
    }

    .hf-app-container.hf-step-mode .hf-card.hf-step2-mask-card [id^="canvas-wrapper-"] {
        height: auto !important;
        min-height: 280px !important;
        max-height: none !important;
        flex: 1 1 auto;
    }

    .hf-app-container.hf-step-mode .hf-btn {
        padding: 8px 12px;
        font-size: 13px;
        border-radius: 8px;
    }

    .hf-app-container.hf-step-mode .hf-btn-action-primary {
        max-width: 320px;
        width: min(100%, 320px);
    }


    .hf-app-container.hf-step-mode .hf-step3-controls-col .hf-tool-panel {
        padding: 10px !important;
        gap: 8px !important;
    }

    .hf-app-container.hf-step-mode .hf-step3-controls-col .hf-tool-panel > div {
        width: 100%;
        justify-content: flex-start;
    }

    .hf-app-container.hf-step-mode .hf-step3-controls-col [id^="hf-status-"] {
        display: block !important;
        width: 100%;
        box-sizing: border-box;
        border-radius: 10px !important;
        font-size: 13px !important;
        padding: 8px 11px !important;
    }

    .hf-app-container.hf-step-mode .hf-step3-controls-col .hf-finetune-wrap {
        padding: 9px;
        border-radius: 10px;
        margin-bottom: 0;
    }

    .hf-app-container.hf-step-mode .hf-step3-controls-col .hf-alert {
        margin: 0;
        padding: 10px;
        border-radius: 10px;
        gap: 10px;
    }

    .hf-app-container.hf-step-mode .hf-card.hf-step1-product-card,
    .hf-app-container.hf-step-mode .hf-card.hf-step2-mask-card,
    .hf-app-container.hf-step-mode .hf-card.hf-step2-support-card {
        border-color: #d5e1ec;
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.09);
    }

    .hf-app-container.hf-step-mode .hf-card.hf-step1-product-card .hf-step-title,
    .hf-app-container.hf-step-mode .hf-card.hf-step2-mask-card .hf-step-title,
    .hf-app-container.hf-step-mode .hf-card.hf-step2-support-card .hf-step-title {
        font-size: 19px;
        line-height: 1.2;
        margin-bottom: 4px;
    }

    .hf-app-container.hf-step-mode .hf-card.hf-step1-product-card .hf-step-desc,
    .hf-app-container.hf-step-mode .hf-card.hf-step2-mask-card .hf-step-desc,
    .hf-app-container.hf-step-mode .hf-card.hf-step2-support-card .hf-step-desc {
        margin-bottom: 10px;
        font-size: 13px;
        line-height: 1.4;
        color: #53687a;
        max-width: none;
    }

    .hf-app-container.hf-step-mode .hf-card.hf-step1-product-card .hf-step-product-name {
        margin: 0 0 10px;
        font-size: 16px;
        line-height: 1.3;
        color: #1f3342;
        letter-spacing: -0.01em;
    }

    .hf-app-container.hf-step-mode .hf-card.hf-step1-product-card .hf-variations-grid {
        gap: 6px;
        margin-bottom: 8px;
    }

    .hf-app-container.hf-step-mode .hf-card.hf-step1-product-card .hf-tile {
        min-height: 38px;
        padding: 8px 10px;
        border-radius: 8px;
        font-size: 12px;
        line-height: 1.2;
    }

    .hf-app-container.hf-step-mode .hf-card.hf-step1-product-card .hf-tile.active:not(.hf-tile-has-texture):not(.hf-tile-product-swatch) {
        border-color: var(--hf-brand);
        background: var(--hf-brand-tint);
        color: var(--hf-ink);
    }

    .hf-app-container.hf-step-mode .hf-card.hf-step1-product-card [id^="hf-feedback-"] {
        margin-top: 8px !important;
        font-size: 13px !important;
        line-height: 1.35;
    }

    .hf-app-container.hf-step-mode .hf-card.hf-step1-product-card [id^="hf-preview-image-"] {
        max-width: 150px !important;
        border-radius: 10px !important;
        margin-top: 10px !important;
    }

    .hf-app-container.hf-step-mode .hf-card.hf-step1-product-card .hf-step-inline-actions {
        margin-top: 14px;
        justify-content: center;
    }

    .hf-app-container.hf-step-mode .hf-card.hf-step2-mask-card .hf-step3-layout {
        gap: 8px;
    }

    .hf-app-container.hf-step-mode .hf-card.hf-step2-mask-card .hf-step3-canvas-col {
        background: rgba(255, 255, 255, 0.92);
        border: 1px solid #dbe7f1;
        border-radius: 12px;
        padding: 4px;
        min-height: 0;
    }

    .hf-app-container.hf-step-mode .hf-card.hf-step2-mask-card [id^="canvas-wrapper-"] {
        border-radius: 10px !important;
        min-height: 0 !important;
        flex: 1 1 auto;
    }

    .hf-app-container.hf-step-mode .hf-card.hf-step2-mask-card .hf-tool-btn,
    .hf-app-container.hf-step-mode .hf-card.hf-step2-mask-card .hf-tool-mini-btn {
        border-radius: 8px;
        font-size: 11px;
        line-height: 1.2;
        padding: 5px 9px;
    }

    .hf-app-container.hf-step-mode .hf-card.hf-step2-support-card .hf-finetune-label {
        margin-bottom: 4px;
        font-size: 11px;
        letter-spacing: 0.04em;
    }

    .hf-app-container.hf-step-mode .hf-card.hf-step2-support-card .hf-finetune-help {
        margin-bottom: 4px;
        font-size: 11px;
        line-height: 1.35;
    }

    .hf-app-container.hf-step-mode .hf-card.hf-step2-support-card .hf-advanced-panel summary {
        padding: 7px 9px;
        font-size: 12px;
    }

    .hf-app-container.hf-step-mode .hf-card.hf-step2-support-card .hf-advanced-panel-inner {
        padding: 7px 9px 8px;
    }

    .hf-app-container.hf-step-mode .hf-card.hf-step2-support-card textarea[id^="hf-customer-note-"] {
        min-height: 72px;
        font-size: 12px !important;
    }

    .hf-app-container.hf-step-mode .hf-card.hf-step2-support-card .hf-workspace-helper {
        padding: 7px 9px;
        font-size: 11px;
    }

    .hf-app-container.hf-step-mode .hf-card.hf-step2-support-card .hf-quick-note-btn {
        padding: 5px 8px;
        font-size: 11px;
        gap: 5px;
    }

    .hf-app-container.hf-step-mode .hf-tool-panel,
    .hf-app-container.hf-step-mode .hf-finetune-wrap {
        background: rgba(255, 255, 255, 0.92) !important;
        backdrop-filter: blur(2px);
    }

    .hf-app-container.hf-step-mode [id^="hf-result-container-"] {
        padding-top: 12px;
    }

    .hf-app-container.hf-step-mode [id^="hf-result-container-"] .hf-step-title {
        margin-bottom: 6px;
    }

    .hf-app-container.hf-step-mode [id^="hf-result-container-"] .hf-comparison-container {
        width: min(100%, 1000px) !important;
        margin: 0 auto 14px !important;
    }

    .hf-app-container.hf-step-mode [id^="hf-result-container-"] .hf-result-actions {
        width: 100%;
        margin: 0;
    }

    .hf-app-container.hf-step-mode [id^="hf-result-container-"] .hf-result-disclaimer {
        margin-top: 8px;
        font-size: 10px;
        color: #7b8a98;
        opacity: 0.86;
    }

    @media (max-width: 1100px) {
        .hf-step3-layout {
            grid-template-columns: 1fr;
        }

        .hf-app-container.hf-step-mode .hf-card.hf-step2-mask-card.is-active {
            min-height: 0;
            max-height: none;
            overflow: visible;
        }

        .hf-app-container.hf-step-mode .hf-card.hf-step2-mask-card .hf-step3-controls-col {
            overflow: visible;
        }

        .hf-app-container.hf-step-mode .hf-card.hf-step2-mask-card [id^="canvas-wrapper-"] {
            height: min(54dvh, 500px) !important;
        }
    }

    @media (max-width: 768px) {
        .hf-app-container.hf-step-mode .hf-step-nav {
            position: sticky;
            top: 0;
            z-index: 40;
            background: #f1f5f9;
            padding-top: 4px;
        }

        .hf-app-container.hf-step-mode .hf-card.hf-step2-mask-card [id^="canvas-wrapper-"] {
            height: min(64dvh, 700px) !important;
            min-height: 380px !important;
        }

        .hf-quick-tags-row {
            flex-wrap: nowrap !important;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 3px;
            scrollbar-width: thin;
        }

        .hf-quick-tags-row .hf-quick-note-btn {
            flex: 0 0 auto;
            white-space: nowrap;
        }

        body.hf-visualizer-embed .hf-generate-sticky {
            position: sticky;
            bottom: 0;
            z-index: 50;
        }
    }

    /* Workspace Step 2: always give canvas full width (desktop + mobile). */
    .hf-app-container.hf-step-mode[data-hf-active-step="2"] .hf-card.hf-step2-mask-card[id^="hf-mask-card-"] .hf-step3-layout {
        grid-template-columns: 1fr !important;
        gap: 8px;
        flex: 1 1 auto;
        min-height: 0;
    }

    .hf-app-container.hf-step-mode[data-hf-active-step="2"] .hf-card.hf-step2-mask-card[id^="hf-mask-card-"] .hf-step3-controls-col {
        display: none !important;
    }

    .hf-app-container.hf-step-mode[data-hf-active-step="2"] [id^="hf-mask-card-"] .hf-step3-canvas-col {
        width: 100%;
        min-width: 0;
        min-height: 0;
        height: 100%;
    }

    .hf-app-container.hf-step-mode[data-hf-active-step="2"] .hf-card.hf-step2-mask-card[id^="hf-mask-card-"] [id^="canvas-wrapper-"] {
        width: 100% !important;
        max-width: 100% !important;
        height: var(--hf-step2-workspace-height, clamp(220px, 40dvh, 520px)) !important;
        min-height: var(--hf-step2-workspace-height, clamp(220px, 40dvh, 520px)) !important;
        max-height: var(--hf-step2-workspace-height, clamp(220px, 40dvh, 520px)) !important;
        overflow: auto !important;
        flex: 0 0 auto !important;
    }

    .hf-app-container.hf-step-mode[data-hf-active-step="2"] [id^="hf-mask-card-"] canvas[id^="hf-canvas-"] {
        max-width: none !important;
        max-height: none !important;
        display: block;
        margin: 0 auto !important;
    }

    @media (max-width: 768px) {
        .hf-app-container.hf-step-mode[data-hf-active-step="2"] [id^="hf-mask-card-"] [id^="canvas-wrapper-"] {
            min-height: min(62dvh, 700px) !important;
        }
    }

    @media (min-width: 1024px) {

        body.hf-visualizer-embed .hf-progress-wrap {
            top: 2px;
            padding: 6px 8px;
            margin-bottom: 8px;
        }

        body.hf-visualizer-embed .hf-step-nav {
            gap: 6px;
            margin-bottom: 8px;
        }

        body.hf-visualizer-embed .hf-step-nav-btn {
            font-size: 12px;
            padding: 7px 8px;
        }

        body.hf-visualizer-embed .hf-step-nav-btn span {
            font-size: 10px;
            margin-top: 1px;
        }

        body.hf-visualizer-embed .hf-card {
            padding: 20px;
        }

        body.hf-visualizer-embed .hf-step-title {
            font-size: 20px;
            gap: 8px;
            margin-bottom: 6px;
        }

        body.hf-visualizer-embed .hf-step-number {
            width: 30px;
            height: 30px;
            font-size: 14px;
        }

        body.hf-visualizer-embed .hf-step-desc {
            font-size: 13px;
            margin-bottom: 10px;
        }

        body.hf-visualizer-embed .hf-btn {
            padding: 7px 11px;
            font-size: 12px;
        }

        body.hf-visualizer-embed .hf-btn-action-primary {
            max-width: 320px;
            width: min(100%, 320px);
        }

        body.hf-visualizer-embed .hf-drop-zone {
            min-height: var(--hf-embed-desktop-media-height);
            padding: 22px 18px !important;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }

        body.hf-visualizer-embed .hf-drop-zone .hf-drop-icon {
            font-size: 44px !important;
            margin-bottom: 12px !important;
        }

        body.hf-visualizer-embed .hf-drop-zone > p {
            font-size: 16px !important;
            margin-bottom: 16px !important;
        }

        body.hf-visualizer-embed .hf-upload-preview-stage {
            margin-top: 10px;
            padding: 10px;
        }

        body.hf-visualizer-embed .hf-upload-preview-image {
            width: 100%;
            height: var(--hf-embed-desktop-media-height);
            max-height: none;
        }

        body.hf-visualizer-embed .hf-upload-preview-meta {
            margin-top: 8px;
        }

        body.hf-visualizer-embed .hf-upload-preview-copy strong {
            font-size: 14px;
        }

        body.hf-visualizer-embed .hf-upload-preview-copy span {
            font-size: 12px;
        }

        body.hf-visualizer-embed .hf-upload-photo-examples {
            gap: 6px;
            margin-bottom: 8px;
        }

        body.hf-visualizer-embed .hf-upload-photo-card {
            padding: 6px;
        }

        body.hf-visualizer-embed .hf-upload-photo-thumb {
            width: 60px;
            height: 38px;
            flex: 0 0 60px;
        }

        body.hf-visualizer-embed .hf-upload-photo-copy strong {
            font-size: 12px;
        }

        body.hf-visualizer-embed .hf-upload-photo-copy span {
            font-size: 11px;
        }

    }

    @media (max-width: 768px) {
        .hf-app-container {
            padding: 6px;
            padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        }

        .hf-app-container.hf-step-mode {
            padding-top: 4px;
        }

        body.hf-visualizer-embed .hf-progress-wrap {
            position: static;
            padding: 6px 8px;
            margin-bottom: 8px;
        }

        body.hf-visualizer-embed .hf-progress-label {
            font-size: 12px;
        }

        body.hf-visualizer-embed .hf-step-nav {
            display: flex !important;
            grid-template-columns: none !important;
            gap: 6px;
            margin-bottom: 8px;
            overflow-x: auto;
            padding: 2px 0 6px;
            scroll-snap-type: x proximity;
            -webkit-overflow-scrolling: touch;
        }

        body.hf-visualizer-embed .hf-step-nav-btn {
            flex: 0 0 116px;
            min-height: 44px;
            padding: 7px 8px;
            font-size: 12px;
            scroll-snap-align: start;
        }

        body.hf-visualizer-embed .hf-step-nav-btn span {
            font-size: 10px;
        }

        body.hf-visualizer-embed .hf-card,
        .hf-app-container.hf-step-mode .hf-card.hf-step-panel.is-active {
            padding: 12px !important;
            border-radius: 14px;
        }

        body.hf-visualizer-embed .hf-step-title {
            font-size: 20px;
            gap: 8px;
        }

        body.hf-visualizer-embed .hf-step-desc {
            font-size: 14px;
            margin-bottom: 10px;
        }

        body.hf-visualizer-embed .hf-btn,
        body.hf-visualizer-embed .hf-tool-btn,
        body.hf-visualizer-embed .hf-tool-mini-btn,
        body.hf-visualizer-embed .hf-quick-note-btn {
            min-height: 44px;
        }

        body.hf-visualizer-embed .hf-btn-action-primary {
            width: 100%;
            max-width: none;
        }


        .hf-app-container.hf-step-mode[data-hf-active-step="2"] [id^="hf-step2-footer-"] {
            position: static;
            bottom: auto;
            z-index: auto;
            margin-top: 10px;
            padding: 0;
            background: none;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="2"] [id^="hf-generate-card-"] {
            margin: 0;
            width: 100%;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="2"] [id^="hf-mask-card-"] .hf-workspace-toolbar-slot {
            display: block;
            margin: 0 0 8px;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="2"] [id^="hf-mask-card-"] .hf-workspace-toolbar-slot [id^="brush-controls-"] {
            padding: 8px !important;
            gap: 8px !important;
            justify-content: flex-start !important;
            align-items: stretch !important;
            overflow-x: visible;
            flex-wrap: wrap !important;
            scrollbar-width: none;
            -webkit-overflow-scrolling: touch;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="2"] [id^="hf-mask-card-"] .hf-workspace-toolbar-slot [id^="brush-controls-"]::-webkit-scrollbar {
            display: none;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="2"] [id^="hf-mask-card-"] .hf-workspace-toolbar-slot [id^="brush-controls-"] > div {
            width: 100% !important;
            flex: 0 0 100%;
            gap: 8px !important;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="2"] [id^="hf-mask-card-"] .hf-workspace-toolbar-slot [id^="brush-controls-"] .hf-tool-group-main {
            display: grid !important;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            align-items: stretch;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="2"] [id^="hf-mask-card-"] .hf-workspace-toolbar-slot [id^="brush-controls-"] .hf-tool-group-main label {
            grid-column: 1 / -1;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="2"] [id^="hf-mask-card-"] .hf-workspace-toolbar-slot [id^="brush-controls-"] .hf-tool-group-brush,
        .hf-app-container.hf-step-mode[data-hf-active-step="2"] [id^="hf-mask-card-"] .hf-workspace-toolbar-slot [id^="brush-controls-"] .hf-tool-group-zoom {
            justify-content: flex-start;
            flex-wrap: wrap;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="2"] [id^="hf-mask-card-"] .hf-workspace-toolbar-slot [id^="brush-controls-"] label {
            font-size: 11px !important;
            white-space: nowrap;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="2"] [id^="hf-mask-card-"] .hf-workspace-toolbar-slot [id^="brush-controls-"] .hf-btn {
            flex: 0 0 auto;
            min-height: 38px;
            padding: 6px 9px !important;
            font-size: 11px !important;
            white-space: nowrap;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="2"] [id^="hf-mask-card-"] .hf-workspace-toolbar-slot [id^="brush-controls-"] .hf-tool-group-main .hf-btn {
            width: 100%;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="2"] [id^="hf-mask-card-"] .hf-workspace-toolbar-slot [id^="brush-controls-"] [id^="brush-size-"] {
            width: min(150px, 100%) !important;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="2"] .hf-card.hf-step2-mask-card[id^="hf-mask-card-"] [id^="canvas-wrapper-"] {
            height: min(52dvh, 400px) !important;
            min-height: 260px !important;
            max-height: min(52dvh, 400px) !important;
            touch-action: pan-x pan-y;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="2"] .hf-marking-continue-wrap:not([hidden]) {
            display: block;
        }


        body.hf-visualizer-embed .hf-quick-tags-row {
            display: flex;
            flex-wrap: wrap !important;
            gap: 8px;
            overflow-x: visible;
        }

        body.hf-visualizer-embed .hf-quick-tags-row .hf-quick-note-btn {
            flex: 1 1 calc(50% - 8px);
            justify-content: center;
            min-width: 0;
            white-space: normal;
        }

        body.hf-visualizer-embed .hf-lead-grid {
            grid-template-columns: 1fr !important;
        }
    }


    @media (max-width: 1180px) {
        .hf-app-container.hf-step-mode .hf-step-nav {
            margin-bottom: 14px;
            padding-bottom: 10px;
        }

        .hf-app-container.hf-step-mode .hf-steps-wrapper {
            padding-top: 4px;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="1"] [id^="hf-product-card-"] {
            padding: 12px 14px 14px !important;
            max-height: none;
            overflow: visible;
        }

        .hf-app-container.hf-step-mode .hf-card.hf-step1-product-card .hf-step-product-name {
            margin-bottom: 12px;
            font-size: 18px;
            line-height: 1.25;
            overflow-wrap: anywhere;
        }

        .hf-app-container.hf-step-mode .hf-card.hf-step1-product-card .hf-variations-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
            gap: 8px;
            margin-bottom: 16px;
        }

        .hf-app-container.hf-step-mode .hf-card.hf-step1-product-card .hf-tile {
            min-height: 52px;
            padding: 8px 10px;
            font-size: 13px;
            min-width: 0;
        }

        .hf-app-container.hf-step-mode .hf-card.hf-step1-product-card .hf-tile.hf-tile-has-texture {
            min-height: 56px;
        }

        .hf-app-container.hf-step-mode .hf-card.hf-step1-product-card [id^="hf-feedback-"] {
            margin-top: 8px !important;
            margin-bottom: 0 !important;
        }

        .hf-app-container.hf-step-mode .hf-card.hf-step1-product-card [id^="hf-preview-image-"] {
            max-width: 190px !important;
            margin-top: 12px !important;
        }


        .hf-app-container.hf-step-mode[data-hf-active-step="3"] [id^="hf-result-sidebar-card-"] .hf-step-title {
            margin-bottom: 6px;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="3"] [id^="hf-result-sidebar-card-"] .hf-step-desc {
            margin-bottom: 10px;
            max-width: none;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="3"] [id^="hf-result-sidebar-card-"] .hf-result-summary {
            margin-bottom: 10px;
            padding: 10px;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="3"] [id^="hf-result-sidebar-card-"] .hf-result-summary-image {
            max-width: 150px;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="3"] [id^="hf-result-sidebar-card-"] .hf-result-sidebar-loading {
            margin-bottom: 0;
            padding: 10px;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="3"] [id^="hf-result-sidebar-card-"] .hf-result-sidebar-loading-preview {
            display: none;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="3"] [id^="hf-step3-footer-"] {
            order: 3 !important;
            position: static;
            margin-top: 0;
            padding: 0;
            background: none;
        }
    }

    .hf-app-container.hf-step-mode .hf-step-nav {
        position: relative;
        z-index: 5;
        align-items: stretch;
        flex: 0 0 auto;
        margin: 0 0 14px;
        padding-bottom: 8px;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }

    .hf-app-container.hf-step-mode .hf-step-nav::-webkit-scrollbar {
        display: none;
    }

    .hf-app-container.hf-step-mode .hf-step-nav-btn {
        box-sizing: border-box;
        min-height: 54px;
        overflow: hidden;
    }

    .hf-app-container.hf-step-mode .hf-steps-wrapper {
        position: relative;
        z-index: 1;
        padding-top: 2px;
    }

    .hf-app-container.hf-step-mode .hf-card {
        z-index: 1;
    }

    .hf-app-container.hf-step-mode .hf-step1-product-card .hf-variations-grid {
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        align-items: stretch;
    }

    .hf-app-container.hf-step-mode .hf-tile {
        min-width: 0;
        overflow: hidden;
        overflow-wrap: anywhere;
        box-sizing: border-box;
        position: relative;
    }

    .hf-app-container.hf-step-mode .hf-tile.active::after {
        top: 6px;
        right: 6px;
        width: 24px;
        height: 24px;
        z-index: 2;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.18);
    }

    @media (max-width: 900px) {
        html,
        body.hf-visualizer-embed {
            margin-top: 0 !important;
            padding-top: 0 !important;
        }

        .hf-app-container {
            padding-top: 0 !important;
        }

        .hf-app-container.hf-step-mode {
            padding-top: 0 !important;
        }

        .hf-app-container.hf-step-mode .hf-progress-wrap {
            position: sticky;
            top: 0;
            margin-bottom: 6px;
            padding: 5px 7px;
            border-radius: 8px;
            box-shadow: 0 3px 10px rgba(15, 23, 42, 0.06);
        }

        .hf-app-container.hf-step-mode .hf-progress-head {
            margin-bottom: 3px;
            gap: 6px;
        }

        .hf-app-container.hf-step-mode .hf-progress-label {
            font-size: 12px;
            line-height: 1.2;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .hf-app-container.hf-step-mode .hf-progress-percent {
            flex: 0 0 auto;
            font-size: 11px;
            line-height: 1.2;
        }

        .hf-app-container.hf-step-mode .hf-progress-track {
            height: 3px;
        }

        /* M3 WP-8: mobil viser kompakte trin-pills (var: display none) */
        .hf-app-container.hf-step-mode .hf-step-nav {
            display: grid !important;
            grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
            gap: 6px !important;
            margin: 8px 0 10px !important;
            padding: 0 !important;
        }
        .hf-app-container.hf-step-mode .hf-step-nav.hf-has-close {
            grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(44px, auto) !important;
        }
        .hf-app-container.hf-step-mode .hf-step-nav-close {
            min-height: 44px !important;
            padding: 6px 8px !important;
            font-size: 12px !important;
        }
        .hf-app-container.hf-step-mode .hf-step-nav-btn {
            min-height: 44px !important;
            padding: 6px 8px !important;
            font-size: 12px !important;
            justify-content: center !important;
        }
        .hf-app-container.hf-step-mode .hf-step-nav-btn span {
            display: none !important;
        }

        .hf-app-container.hf-step-mode .hf-step-nav-btn {
            min-height: 44px;
        }

        .hf-app-container.hf-step-mode .hf-steps-wrapper {
            padding-top: 0;
        }

        .hf-app-container.hf-step-mode .hf-step1-product-card .hf-variations-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 1180px) {
        .hf-app-container.hf-step-mode .hf-step1-product-card .hf-variations-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        }
    }

    @media (max-width: 520px) {
        .hf-app-container.hf-step-mode[data-hf-active-step="1"] [id^="hf-product-card-"] {
            padding: 10px 12px 12px !important;
        }

        .hf-app-container.hf-step-mode .hf-card.hf-step1-product-card .hf-step-product-name {
            font-size: 16px;
        }

        .hf-app-container.hf-step-mode .hf-card.hf-step1-product-card .hf-variations-grid {
            gap: 8px;
        }

        .hf-app-container.hf-step-mode .hf-card.hf-step1-product-card .hf-tile {
            min-height: 46px;
            padding: 7px 8px;
            font-size: 11px;
            letter-spacing: 0;
        }

        .hf-app-container.hf-step-mode .hf-card.hf-step1-product-card .hf-tile.active {
            padding-right: 32px;
        }

        .hf-app-container.hf-step-mode .hf-card.hf-step1-product-card .hf-tile.hf-tile-has-texture {
            min-height: 50px;
        }

        .hf-app-container.hf-step-mode .hf-card.hf-step1-product-card [id^="hf-preview-image-"] {
            max-width: 140px !important;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="3"] [id^="hf-result-container-"] .hf-comparison-container {
            min-height: 220px;
        }
    }

    .hf-canvas-brush-cursor {
        cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='10.5' fill='white' fill-opacity='.24' stroke='%23334155' stroke-width='1.8'/%3E%3Ccircle cx='20' cy='20' r='7' fill='none' stroke='%2367e8f9' stroke-width='1.6'/%3E%3Ccircle cx='20' cy='20' r='1.8' fill='%2306b6d4'/%3E%3Cpath d='M27.8 10.8l4-4 1.8 1.8-4 4z' fill='%230f172a'/%3E%3Cpath d='M26.5 12.1l1.3-1.3 2.2 2.2-1.3 1.3-2.6.5z' fill='%23f59e0b' stroke='%230f172a' stroke-width='.7' stroke-linejoin='round'/%3E%3C/svg%3E") 20 20, crosshair !important;
    }

    /* Customer-first UX and accessibility hardening (v1.10.97). */
    .hf-visually-hidden:where(:not(:focus-within, :active)) {
        position: absolute !important;
        clip-path: inset(50%) !important;
        overflow: hidden !important;
        width: 1px !important;
        height: 1px !important;
        margin: -1px !important;
        padding: 0 !important;
        border: 0 !important;
        white-space: nowrap !important;
    }

    .hf-app-container :where(button, a, input, textarea, summary):focus-visible {
        outline: 3px solid #0b6ea8;
        outline-offset: 3px;
    }

    .hf-upload-tips {
        margin-top: 14px;
        border: 1px solid var(--hf-border);
        border-radius: 12px;
        background: #f8fafc;
        overflow: hidden;
    }

    .hf-upload-tips > summary {
        display: flex;
        min-height: 48px;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        box-sizing: border-box;
        padding: 10px 12px;
        color: var(--hf-text-dark);
        font-size: 13px;
        font-weight: 800;
        cursor: pointer;
    }

    .hf-upload-tips > summary span {
        color: var(--hf-text-muted);
        font-size: 11px;
        font-weight: 600;
        text-align: right;
    }

    .hf-upload-tips[open] > summary {
        border-bottom: 1px solid var(--hf-border);
    }

    .hf-upload-tips-content {
        padding: 12px;
    }

    .hf-field-label,
    .hf-lead-field > span {
        display: block;
        margin-bottom: 5px;
        color: #334b5c;
        font-size: 12px;
        font-weight: 800;
        line-height: 1.3;
    }

    .hf-lead-field {
        display: block;
        min-width: 0;
    }

    .hf-lead-field small {
        color: var(--hf-text-muted);
        font-size: 0.92em;
        font-weight: 600;
    }

    .hf-lead-field .hf-lead-input {
        width: 100%;
        box-sizing: border-box;
    }

    .hf-btn-success:not(:disabled) {
        border-color: #047857;
        background: linear-gradient(135deg, #047857 0%, #0f766e 100%);
        color: #ffffff;
    }

    .hf-workspace-toolbar-slot {
        position: relative;
        z-index: 3;
    }

    /* KRITISK: temaet giver <button> display:inline-flex, hvilket slaar browserens
       [hidden]{display:none} - saa hidden VIRKER IKKE paa knapper (Kenni 09-08:
       doed LUK-knap paa direkte URL; ogsaa utilgaengelige laage-valg blev vist).
       Gaelder alle hidden-elementer i appen, saa fremtidige tilfaelde er daekket. */
    .hf-app-container [hidden],
    .hf-visualizer-embed-shell [hidden] {
        display: none !important;
    }

    /* Markeringsvaerktoejerne manglede HELT paa desktop (Kenni 08-08): slot'en
       er display:none for alle bredder, og genvisningen laa kun i 768-blokken,
       mens controls-col samtidig skjules i trin 2 - panelet havde altsaa ingen
       synlig plads over 768px. Mobil (<=768) roeres ikke. */
    @media (min-width: 769px) {
        .hf-app-container.hf-step-mode[data-hf-active-step="2"] [id^="hf-mask-card-"] .hf-workspace-toolbar-slot {
            display: block;
            margin: 0 0 10px;
        }
    }

    @media (pointer: coarse) {
        .hf-app-container :where(button, a.hf-btn, summary) {
            min-height: 48px;
        }
    }

    @media (max-width: 768px) {
        .hf-app-container.hf-step-mode .hf-btn,
        .hf-app-container.hf-step-mode .hf-tool-btn,
        .hf-app-container.hf-step-mode .hf-tool-mini-btn,
        .hf-app-container.hf-step-mode .hf-quick-note-btn {
            min-height: 44px !important;
        }

        .hf-app-container.hf-step-mode [id^="brush-controls-"] [id^="brush-size-"] {
            min-height: 44px;
            height: 44px !important;
            box-sizing: border-box;
            padding-block: 17px;
            background-clip: content-box !important;
        }

        .hf-app-container.hf-step-mode .hf-scene-polish-option,
        .hf-app-container.hf-step-mode .hf-lead-consent {
            min-height: 44px;
            box-sizing: border-box;
            padding-block: 7px;
        }

        .hf-app-container.hf-step-mode :where(input[type="checkbox"], input[type="radio"]) {
            width: 20px;
            min-width: 20px;
            height: 20px;
            accent-color: var(--hf-primary);
        }

        .hf-app-container.hf-step-mode :where(input[type="text"], input[type="email"], input[type="tel"], textarea) {
            font-size: 1rem !important;
        }

        .hf-app-container.hf-step-mode[data-hf-active-step="2"] .hf-card.hf-step2-mask-card[id^="hf-mask-card-"] [id^="canvas-wrapper-"] {
            height: var(--hf-canvas-fit-height, 260px) !important;
            min-height: var(--hf-canvas-fit-height, 260px) !important;
            max-height: var(--hf-canvas-fit-height, 260px) !important;
        }

        .hf-upload-tips > summary {
            align-items: flex-start;
            flex-direction: column;
            gap: 2px;
        }

        .hf-upload-tips > summary span {
            text-align: left;
        }
    }

    @media (forced-colors: active) {
        .hf-btn-success:not(:disabled),
        .hf-step-nav-btn.is-active,
        .hf-tile.active {
            border: 2px solid Highlight;
        }
    }

/* ============================================================================
   M3 v1.12.0 — HYBRID-DESIGNLAG (kontrakt: tests/harness/mockups/retning-hybrid.html)
   A-grundlag + B-varme. Scoped til embed-wizard-flowet; WP-6 re-scoper alt.
   ============================================================================ */

/* ---------- typografi ---------- */
.hf-app-container.hf-flow-embed-steps {
    font-family: var(--hf-font-body);
    color: var(--hf-ink);
}
.hf-app-container.hf-flow-embed-steps .hf-step-title,
.hf-app-container.hf-flow-embed-steps .hf-step-nav-btn,
.hf-app-container.hf-flow-embed-steps .hf-btn,
.hf-app-container.hf-flow-embed-steps .hf-tool-btn,
.hf-app-container.hf-flow-embed-steps .hf-tile,
.hf-app-container.hf-flow-embed-steps .hfv-bar-chip {
    font-family: var(--hf-font-display);
}

/* ---------- een arbejdskolonne + bjaelke-anatomi (embed: flex-laast, aldrig overlap) ---------- */
body.hf-visualizer-embed .hf-app-container.hf-flow-embed-steps {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--hf-paper);
    padding-bottom: 0 !important;
}
body.hf-visualizer-embed .hf-app-container.hf-flow-embed-steps .hf-steps-wrapper {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    max-width: 900px;
    width: 100%;
    margin: 0 auto;
    padding: 4px 16px calc(var(--hf-bar-h) + env(safe-area-inset-bottom, 0px) + 24px);
    scroll-padding-bottom: calc(var(--hf-bar-h) + env(safe-area-inset-bottom, 0px) + 24px);
}
@media (max-width: 768px) {
    body.hf-visualizer-embed .hf-app-container.hf-flow-embed-steps .hf-steps-wrapper {
        padding: 2px 10px 18px;
    }
}

/* Gammel topprogress skjules - bjaelken ejer fremskridt; trin-nav beholdes som faner */
.hf-app-container.hf-flow-embed-steps .hf-progress-wrap { display: none !important; }

/* ---------- handlingsbjaelken ---------- */
.hf-app-container.hf-flow-embed-steps .hfv-bar {
    position: relative;
    flex: none;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--hf-bar-h);
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px));
    margin-bottom: var(--hf-keyboard-offset, 0px);
    background: rgba(255, 254, 251, 0.92);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    backdrop-filter: blur(12px) saturate(1.3);
    border-top: 1px solid var(--hf-line);
}
/* Inline paa side (ikke embed-skal): sticky i sidens scroll */
body:not(.hf-visualizer-embed) .hf-app-container.hf-flow-embed-steps .hfv-bar {
    position: sticky;
    bottom: calc(env(safe-area-inset-bottom, 0px) + var(--hf-keyboard-offset, 0px));
    z-index: 42;
    border-radius: 0 0 var(--hf-r) var(--hf-r);
}
.hfv-bar-progress {
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--hf-line-soft);
    overflow: hidden;
}
.hfv-bar-progress span {
    display: block;
    height: 100%;
    width: 33%;
    background: var(--hf-brand);
    border-radius: 0 2px 2px 0;
    transition: width 0.3s ease;
}
.hfv-bar-chip { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hfv-bar-step {
    font: 800 10.5px/1 var(--hf-font-display);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hf-muted);
}
.hfv-bar-val {
    font: 700 13.5px/1.3 var(--hf-font-display);
    color: var(--hf-ink);
    max-width: 46vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hfv-bar-spacer { flex: 1; }

/* ---------- bjaelke-knapper ---------- */
.hf-app-container.hf-flow-embed-steps .hfv-btn-primary {
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 22px;
    border-radius: var(--hf-r-s);
    background: var(--hf-brand);
    color: #fff;
    font: 700 14px/1 var(--hf-font-display);
    letter-spacing: 0.01em;
    border: 0;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 6px 16px rgba(36, 69, 90, 0.28);
    transition: background 0.15s ease;
    cursor: pointer;
}
.hf-app-container.hf-flow-embed-steps .hfv-btn-primary:hover:not(:disabled) {
    background: var(--hf-brand-deep);
}
.hf-app-container.hf-flow-embed-steps .hfv-btn-primary:disabled {
    background: #e6e4dc;
    color: #9aa39c;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 1 !important;
}
.hf-app-container.hf-flow-embed-steps .hfv-bar-ghost {
    background: none;
    border: 0;
    color: var(--hf-text);
    font: 700 13px/1 var(--hf-font-display);
    min-height: 44px;
    padding: 8px 10px;
    cursor: pointer;
}
.hf-app-container.hf-flow-embed-steps .hfv-bar-ghost:hover:not(:disabled) { color: var(--hf-ink); }
.hf-app-container.hf-flow-embed-steps .hfv-bar-ghost:disabled { opacity: 0.45; cursor: not-allowed; }

/* Trin-styret synlighed af bjaelkens handlinger (foer init vises trin 1-saettet) */
.hf-app-container.hf-flow-embed-steps .hfv-bar [data-bar-step] { display: none; }
.hf-app-container.hf-flow-embed-steps:not([data-hf-active-step]) .hfv-bar [data-bar-step="1"],
.hf-app-container.hf-flow-embed-steps[data-hf-active-step="1"] .hfv-bar [data-bar-step="1"],
.hf-app-container.hf-flow-embed-steps[data-hf-active-step="2"] .hfv-bar [data-bar-step="2"],
.hf-app-container.hf-flow-embed-steps[data-hf-active-step="3"] .hfv-bar [data-bar-step="3"] {
    display: inline-flex;
}

@media (max-width: 768px) {
    .hf-app-container.hf-flow-embed-steps .hfv-bar { gap: 8px; padding-inline: 12px; min-height: 70px; }
    .hfv-bar-val { max-width: 38vw; font-size: 12.5px; }
    .hf-app-container.hf-flow-embed-steps .hfv-btn-primary { flex: 1 1 auto; max-width: 62%; padding-inline: 14px; }
}

/* ---------- kort-baseline (varm) ---------- */
.hf-app-container.hf-flow-embed-steps .hf-card {
    background: var(--hf-card);
    border: 1px solid var(--hf-line);
    border-radius: var(--hf-r);
    box-shadow: var(--hf-shadow-md);
}

/* ---------- trin-nav som faner (desktop-baseline; WP-8 laver mobil-pills) ---------- */
.hf-app-container.hf-flow-embed-steps.hf-step-mode .hf-step-nav {
    max-width: 900px;
    width: 100%;
    margin: 10px auto 4px;
    padding: 0 16px;
}
.hf-app-container.hf-flow-embed-steps .hf-step-nav-btn {
    border: 1px solid var(--hf-line);
    border-radius: var(--hf-r);
    background: var(--hf-card);
    color: var(--hf-ink);
}
.hf-app-container.hf-flow-embed-steps .hf-step-nav-btn.is-active {
    background: var(--hf-brand);
    border-color: var(--hf-brand);
    color: #fff;
}
.hf-app-container.hf-flow-embed-steps .hf-step-nav-btn.is-complete {
    border-color: var(--hf-success);
    color: var(--hf-success);
}
.hf-app-container.hf-flow-embed-steps .hf-step-nav.hf-has-close {
    grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
}
.hf-app-container.hf-flow-embed-steps .hf-step-nav-close {
    border: 1px solid var(--hf-line);
    border-radius: var(--hf-r);
    background: var(--hf-card);
    color: var(--hf-ink);
    font-size: 13px;
    font-weight: 700;
    padding: 8px 14px;
    cursor: pointer;
}
.hf-app-container.hf-flow-embed-steps .hf-step-nav-close:hover {
    border-color: var(--hf-brand);
    color: var(--hf-brand);
}

/* ---------- interim canvas-hoejde >=1024 (WP-4 forfiner) ---------- */
@media (min-width: 1024px) {
    .hf-app-container.hf-step-mode[data-hf-active-step="2"] [id^="canvas-wrapper-"] {
        height: clamp(320px, 52dvh, 640px) !important;
        min-height: clamp(320px, 52dvh, 640px) !important;
        max-height: clamp(320px, 52dvh, 640px) !important;
    }
}

/* ============================================================================
   M3 WP-3/4 — trin 1 (variant foerst) + trin 2 (moerk scene, toolbar, finpuds)
   ============================================================================ */

/* ---------- trin 1: variantsektion inde i hovedkortet ---------- */
.hf-app-container.hf-flow-embed-steps .hf-inline-variant {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0;
    padding: 0 0 18px !important;
    margin: 0 0 18px !important;
    border-bottom: 1px solid var(--hf-line-soft) !important;
    background: transparent !important;
    display: block !important;
    max-height: none !important;
    overflow: visible !important;
}
.hf-app-container.hf-flow-embed-steps .hf-upload-heading { margin-top: 2px; }
.hf-app-container.hf-flow-embed-steps .hf-variant-price {
    margin: -14px 0 14px;
    font: 700 13px/1.3 var(--hf-font-display);
    color: var(--hf-brand-deep);
}
.hf-app-container.hf-flow-embed-steps .hf-variant-price span {
    font: 500 11.5px/1 var(--hf-font-body);
    color: var(--hf-muted);
}

/* ---------- variant-tiles: 64px, fuld tekst, badge-plads overalt ---------- */
.hf-app-container.hf-flow-embed-steps .hf-variations-grid {
    grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
    gap: 9px;
}
.hf-app-container.hf-flow-embed-steps .hf-tile {
    min-height: 64px !important;
    padding: 10px 34px 10px 12px !important;
    border: 1.5px solid var(--hf-line);
    border-radius: var(--hf-r-s) !important;
    background-color: var(--hf-card);
    color: var(--hf-ink);
    font: 700 13.5px/1.25 var(--hf-font-display) !important;
    text-align: left !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    overflow-wrap: normal !important;
}
.hf-app-container.hf-flow-embed-steps .hf-tile span { white-space: normal; }
.hf-app-container.hf-flow-embed-steps .hf-tile.active {
    border-color: var(--hf-brand) !important;
    background-color: var(--hf-brand-tint);
    color: var(--hf-ink) !important;
    box-shadow: 0 0 0 3px var(--hf-brand-tint);
    padding-right: 34px !important;
}
.hf-app-container.hf-flow-embed-steps .hf-tile.active::after {
    top: 8px !important;
    right: 8px !important;
    width: 20px !important;
    height: 20px !important;
    background-color: var(--hf-brand) !important;
    z-index: 2;
}
.hf-app-container.hf-flow-embed-steps .hf-tile.hf-tile-has-texture,
.hf-app-container.hf-flow-embed-steps .hf-tile.hf-tile-product-swatch {
    min-height: 74px !important;
    color: #fff !important;
    border-color: transparent;
}
.hf-app-container.hf-flow-embed-steps .hf-tile.hf-tile-has-texture.active,
.hf-app-container.hf-flow-embed-steps .hf-tile.hf-tile-product-swatch.active {
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--hf-brand) !important;
    color: #fff !important;
}
@media (max-width: 768px) {
    .hf-app-container.hf-flow-embed-steps .hf-variations-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* ---------- dropzone ---------- */
.hf-app-container.hf-flow-embed-steps .hf-drop-zone {
    border: 1.5px dashed #b9c4b8 !important;
    border-radius: var(--hf-r) !important;
    background: var(--hf-brand-tint-2) !important;
    padding: 34px 20px !important;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.hf-app-container.hf-flow-embed-steps .hf-drop-zone:hover {
    border-color: var(--hf-brand) !important;
    background: var(--hf-brand-tint) !important;
}
.hf-app-container.hf-flow-embed-steps .hf-drop-zone > p {
    font: 700 15px/1.35 var(--hf-font-display) !important;
    margin-bottom: 14px !important;
}
.hf-drop-copy-mobile { display: none; }
@media (max-width: 768px) {
    .hf-drop-copy-desktop { display: none; }
    .hf-drop-copy-mobile { display: inline; }
}
.hf-app-container.hf-flow-embed-steps .hf-drop-zone .hf-btn.hf-btn-primary {
    background: var(--hf-brand);
    color: #fff;
    border-radius: var(--hf-r-s);
    font-family: var(--hf-font-display);
    min-height: 46px;
}
.hf-app-container.hf-flow-embed-steps .hf-drop-zone .hf-btn.hf-btn-primary:hover {
    background: var(--hf-brand-deep);
}

/* ---------- trin 2: moerk scene (kun arbejdsfladen - Kenni-beslutning) ---------- */
.hf-app-container.hf-flow-embed-steps .hf-canvas-stage {
    background: radial-gradient(120% 90% at 50% 0%, var(--hf-stage-2) 0%, var(--hf-stage) 62%) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), var(--hf-shadow-lg);
    padding: clamp(16px, 3.5vw, 30px) !important;
}
.hf-app-container.hf-flow-embed-steps .hf-canvas-stage canvas {
    border-radius: 6px;
}
.hf-app-container.hf-flow-embed-steps [id^="hf-canvas-instruction-"] {
    background: rgba(15, 27, 34, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(6px);
    font-family: var(--hf-font-display) !important;
}

/* ---------- toolbar: hybrid-udtryk + kontrolleret 2-raekkers mobil ---------- */
.hf-app-container.hf-flow-embed-steps [id^="brush-controls-"] {
    background: var(--hf-card) !important;
    border: 1px solid var(--hf-line) !important;
    border-radius: var(--hf-r) !important;
}
.hf-app-container.hf-flow-embed-steps .hf-tool-btn,
.hf-app-container.hf-flow-embed-steps .hf-tool-mini-btn {
    min-height: 44px !important;
    border: 1.5px solid var(--hf-line) !important;
    border-radius: var(--hf-r-s) !important;
    background: var(--hf-card) !important;
    color: var(--hf-brand-deep) !important;
    font-family: var(--hf-font-display) !important;
    font-weight: 700 !important;
}
.hf-app-container.hf-flow-embed-steps .hf-tool-btn.is-active {
    background: var(--hf-brand) !important;
    border-color: var(--hf-brand) !important;
    color: #fff !important;
}
@media (pointer: coarse) {
    .hf-app-container.hf-flow-embed-steps .hf-tool-btn,
    .hf-app-container.hf-flow-embed-steps .hf-tool-mini-btn { min-height: 48px !important; }
}
@media (max-width: 768px) {
    /* krav 4 + Codex-opskrift: ydre 2 kolonner; hovedgruppen spaender fuldt m. egen 2-col;
       pensel raekke 2 kol 1; zoom raekke 2 kol 2. Ingen overlap, fulde labels, 48px coarse. */
    .hf-app-container.hf-flow-embed-steps [id^="brush-controls-"] {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px !important;
        padding: 10px !important;
        align-items: stretch;
    }
    .hf-app-container.hf-flow-embed-steps [id^="brush-controls-"] .hf-tool-group-main {
        grid-column: 1 / -1;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }
    .hf-app-container.hf-flow-embed-steps [id^="brush-controls-"] .hf-tool-group-main > .hf-tool-legend {
        display: none !important;
    }
    .hf-app-container.hf-flow-embed-steps [id^="brush-controls-"] .hf-tool-btn {
        width: 100%;
        min-width: 0;
        justify-content: center !important;
        padding-inline: 8px !important;
        font-size: 12.5px !important;
        white-space: nowrap;
    }
    .hf-app-container.hf-flow-embed-steps [id^="brush-controls-"] .hf-tool-group-brush {
        grid-column: 1 / 2;
        display: flex !important;
        align-items: center;
        gap: 8px !important;
        min-width: 0;
    }
    .hf-app-container.hf-flow-embed-steps [id^="brush-controls-"] .hf-tool-group-brush label {
        font-size: 11px !important;
        white-space: nowrap;
    }
    .hf-app-container.hf-flow-embed-steps [id^="brush-controls-"] .hf-tool-group-brush input[type="range"] {
        width: 100% !important;
        min-width: 0;
    }
    .hf-app-container.hf-flow-embed-steps [id^="brush-controls-"] .hf-tool-group-zoom {
        grid-column: 2 / 3;
        display: flex !important;
        justify-content: flex-end;
        align-items: center;
        gap: 6px !important;
        min-width: 0;
        flex-wrap: nowrap;
    }
    .hf-app-container.hf-flow-embed-steps [id^="brush-controls-"] .hf-tool-group-zoom > .hf-tool-legend {
        display: none !important;
    }
    .hf-app-container.hf-flow-embed-steps [id^="brush-controls-"] .hf-tool-group-zoom .hf-tool-btn {
        width: auto;
    }
}

/* ---------- finpuds: lukket details ---------- */
.hf-finpuds-optional { font: 600 12px/1 var(--hf-font-body); color: var(--hf-muted); }
.hf-app-container.hf-flow-embed-steps .hf-finpuds-details {
    border: 1px solid var(--hf-line);
    border-radius: var(--hf-r);
    background: var(--hf-card);
    margin-top: 6px;
}
.hf-app-container.hf-flow-embed-steps .hf-finpuds-details > summary {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-height: 48px;
    padding: 12px 14px;
    cursor: pointer;
    list-style: none;
}
.hf-app-container.hf-flow-embed-steps .hf-finpuds-details > summary::-webkit-details-marker { display: none; }
.hf-app-container.hf-flow-embed-steps .hf-finpuds-details > summary::after {
    content: "";
    margin-left: auto;
    width: 9px;
    height: 9px;
    border-right: 2px solid var(--hf-muted);
    border-bottom: 2px solid var(--hf-muted);
    transform: rotate(45deg);
    transition: transform 0.18s ease;
    flex: none;
    align-self: center;
}
.hf-app-container.hf-flow-embed-steps .hf-finpuds-details[open] > summary::after {
    transform: rotate(-135deg);
}
.hf-finpuds-summary-title { font: 700 13.5px/1.3 var(--hf-font-display); color: var(--hf-ink); }
.hf-finpuds-summary-hint { font: 500 11.5px/1.3 var(--hf-font-body); color: var(--hf-muted); }
.hf-app-container.hf-flow-embed-steps .hf-finpuds-details[open] > summary {
    border-bottom: 1px solid var(--hf-line-soft);
}
.hf-app-container.hf-flow-embed-steps .hf-finpuds-inner { padding: 14px; }

/* ============================================================================
   M3 WP-5 — trin 3: resultat-hero, handlingsrække, lead, feedback
   ============================================================================ */
.hf-app-container.hf-flow-embed-steps .hf-ba-tag {
    position: absolute;
    top: 12px;
    z-index: 3;
    padding: 6px 13px;
    border-radius: var(--hf-r-pill);
    font: 800 10.5px/1 var(--hf-font-display);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    backdrop-filter: blur(4px);
}
.hf-ba-tag-before { left: 12px; background: rgba(15, 27, 34, 0.72); color: #dbe7ee; }
.hf-ba-tag-after { right: 12px; background: var(--hf-brand); color: #fff; }

/* Ydre handle er kun et usynligt anker - den runde knap er den indre div
   (hvid baggrund her gav en firkant BAG den runde knap, Kenni 08-08) */
.hf-app-container.hf-flow-embed-steps [id^="hf-slider-handle-"] {
    width: 46px !important;
    height: 46px !important;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    background: transparent !important;
    box-shadow: none !important;
    color: var(--hf-brand-deep);
}

/* Lodret skillelinje over og under knappen (klippes af containerens
   overflow:hidden) - saa foer/efter-skellet er tydeligt igen */
.hf-app-container.hf-flow-embed-steps [id^="hf-slider-handle-"]::before,
.hf-app-container.hf-flow-embed-steps [id^="hf-slider-handle-"]::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100vh;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 0 6px rgba(15, 27, 34, 0.4);
    pointer-events: none;
}

.hf-app-container.hf-flow-embed-steps [id^="hf-slider-handle-"]::before {
    bottom: 100%;
}

.hf-app-container.hf-flow-embed-steps [id^="hf-slider-handle-"]::after {
    top: 100%;
}

.hf-result-actionrow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 9px;
    margin-top: 14px;
}
@media (max-width: 768px) {
    .hf-result-actionrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hf-app-container.hf-flow-embed-steps .hf-action-tile {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 10px 8px !important;
    border: 1.5px solid var(--hf-line) !important;
    border-radius: var(--hf-r-s) !important;
    background: var(--hf-card) !important;
    color: var(--hf-brand-deep) !important;
    font: 700 13px/1.2 var(--hf-font-display) !important;
    text-align: center;
    text-decoration: none !important;
}
.hf-app-container.hf-flow-embed-steps .hf-action-tile:hover:not(:disabled) {
    border-color: var(--hf-brand) !important;
    color: var(--hf-ink) !important;
}
.hf-app-container.hf-flow-embed-steps .hf-action-tile:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.hf-app-container.hf-flow-embed-steps .hf-lead-capture {
    margin-top: 14px;
    border: 1px solid #cfe0ea;
    border-radius: var(--hf-r);
    background: linear-gradient(180deg, var(--hf-brand-tint-2), var(--hf-brand-tint));
    padding: 20px;
}
.hf-app-container.hf-flow-embed-steps .hf-lead-title {
    font: 800 17px/1.2 var(--hf-font-display);
    color: var(--hf-ink);
}
.hf-app-container.hf-flow-embed-steps .hf-lead-field > span {
    font: 700 11.5px/1 var(--hf-font-display);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hf-brand-deep);
}
.hf-app-container.hf-flow-embed-steps .hf-lead-input {
    min-height: 44px;
    border: 1.5px solid #c3d4de;
    border-radius: var(--hf-r-s);
    background: #fff;
}
.hf-app-container.hf-flow-embed-steps .hf-lead-input.hf-input-error {
    border-color: var(--hf-danger) !important;
    box-shadow: 0 0 0 3px rgba(194, 65, 12, 0.15);
}
.hf-app-container.hf-flow-embed-steps .hf-lead-consent input {
    width: 20px;
    height: 20px;
    accent-color: var(--hf-brand);
}
.hf-app-container.hf-flow-embed-steps .hf-btn-lead {
    background: var(--hf-brand) !important;
    color: #fff !important;
    border-radius: var(--hf-r-s) !important;
    font-family: var(--hf-font-display) !important;
    min-height: 46px;
}
.hf-app-container.hf-flow-embed-steps .hf-btn-lead:hover:not(:disabled) {
    background: var(--hf-brand-deep) !important;
}

.hf-app-container.hf-flow-embed-steps .hf-feedback-lite {
    margin-top: 14px;
    border: 1px solid var(--hf-line);
    border-radius: var(--hf-r);
    background: var(--hf-card);
    padding: 14px 16px;
}

/* Reveal-overlay paa tokens (uaendret maskineri) */
.hf-app-container.hf-flow-embed-steps .hf-reveal-pill {
    background: rgba(15, 27, 34, 0.82) !important;
    border: 1px solid rgba(255, 255, 255, 0.14);
}
.hf-app-container.hf-flow-embed-steps .hf-reveal-progress-bar {
    background: var(--hf-brand-light) !important;
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.28) 0 8px, rgba(255, 255, 255, 0) 8px 16px) !important;
    background-size: 22px 100%;
    animation: hf-progress-sheen 0.9s linear infinite;
}

/* Range-inputtet maa ALDRIG kunne ses: Woodmart giver disabled inputs
   opacity .6, hvilket gjorde det native track/thumb halvsynligt som en
   "stillestaaende slider" under generering (Kenni 08-08) */
.hf-slider-input {
    opacity: 0 !important;
}

.hf-comparison-container.is-loading .hf-slider-input {
    visibility: hidden !important;
}

/* Arbejds-striber paa progressbaren saa den aldrig ser frossen ud (Kenni 08-08) */
.hf-reveal-progress-bar {
    background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.28) 0 8px, rgba(255, 255, 255, 0) 8px 16px);
    background-size: 22px 100%;
    animation: hf-progress-sheen 0.9s linear infinite;
}

@keyframes hf-progress-sheen {
    to {
        background-position: 22px 0;
    }
}

/* Upload-i-gang paa trin 1: shimmer + statuspille paa preview (Kenni 08-08) */
.hf-upload-preview-stage {
    position: relative;
}

.hf-upload-preview-stage.is-uploading img.hf-upload-preview-image {
    opacity: 0.72;
}

.hf-upload-preview-stage.is-uploading::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    border-radius: inherit;
    background: linear-gradient(110deg, rgba(255, 255, 255, 0) 32%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 68%);
    background-size: 220% 100%;
    animation: hf-upload-shimmer 1.4s linear infinite;
}

.hf-upload-preview-stage.is-uploading::after {
    content: "Uploader dit billede…";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 3;
    padding: 9px 16px;
    border-radius: 999px;
    background: rgba(15, 27, 34, 0.82);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
}

@keyframes hf-upload-shimmer {
    from {
        background-position: 200% 0;
    }
    to {
        background-position: -20% 0;
    }
}


/* M3 hotfix 5: inline-kontekst - indhold skal kunne scrolles fri af sticky bar */
body:not(.hf-visualizer-embed) .hf-app-container.hf-flow-embed-steps .hf-steps-wrapper {
    padding-bottom: calc(var(--hf-bar-h) + env(safe-area-inset-bottom, 0px) + 24px);
}

/* P1c: trin 2-orden - canvas foerst, valgfri disclosure under; support-kortets chrome fjernes */
.hf-app-container.hf-flow-embed-steps[data-hf-active-step="2"] .hf-step2-mask-card { order: 1 !important; }
.hf-app-container.hf-flow-embed-steps[data-hf-active-step="2"] .hf-step2-support-card { order: 2 !important; }
.hf-app-container.hf-flow-embed-steps .hf-step2-support-card {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

/* ============================================================================
   M3 — DESKTOP-KOMPRIMERING (Kenni 08-08: primaeropgaven i eet laptop-viewport,
   1440x900 og 1280x800; ingen nested scroll for primaert indhold; sekundaert
   (tips/finpuds/lead) maa ligge under folden). Kun >=1024px - mobil uroert.
   ============================================================================ */
@media (min-width: 1024px) {
    .hf-app-container.hf-flow-embed-steps.hf-step-mode .hf-step-nav {
        margin: 6px auto 2px;
    }
    .hf-app-container.hf-flow-embed-steps .hf-step-nav-btn {
        min-height: 46px;
    }
    .hf-app-container.hf-flow-embed-steps .hf-step-nav-close {
        min-height: 46px;
        padding: 8px 10px;
        font-size: 12px;
    }
    body.hf-visualizer-embed .hf-app-container.hf-flow-embed-steps .hf-steps-wrapper {
        padding-top: 2px;
    }
    .hf-app-container.hf-flow-embed-steps .hfv-bar { min-height: 68px; }

    /* ---- TRIN 1: to kolonner - variant venstre, upload hoejre ---- */
    .hf-app-container.hf-flow-embed-steps .hf-step1-main-card {
        display: grid;
        grid-template-columns: minmax(0, 11fr) minmax(0, 10fr);
        column-gap: 28px;
        align-items: start;
        padding: 16px 22px 14px !important;
    }
    .hf-app-container.hf-flow-embed-steps .hf-step1-main-card > .hf-inline-variant {
        grid-column: 1;
        grid-row: 1 / span 8;
        padding-bottom: 0 !important;
        margin-bottom: 0 !important;
        border-bottom: 0 !important;
        border-right: 1px solid var(--hf-line-soft) !important;
        padding-right: 24px !important;
    }
    .hf-app-container.hf-flow-embed-steps .hf-step1-main-card > .hf-upload-heading,
    .hf-app-container.hf-flow-embed-steps .hf-step1-main-card > .hf-step-desc,
    .hf-app-container.hf-flow-embed-steps .hf-step1-main-card > .hf-drop-zone,
    .hf-app-container.hf-flow-embed-steps .hf-step1-main-card > [id^="hf-upload-quality-gate-"],
    .hf-app-container.hf-flow-embed-steps .hf-step1-main-card > .hf-upload-preview-stage,
    .hf-app-container.hf-flow-embed-steps .hf-step1-main-card > [id^="hf-bg-id-"] {
        grid-column: 2;
    }
    .hf-app-container.hf-flow-embed-steps .hf-step1-main-card > .hf-upload-tips {
        grid-column: 1 / -1;
        margin-top: 12px;
    }
    .hf-app-container.hf-flow-embed-steps .hf-step1-main-card .hf-step-title {
        font-size: 18px !important;
        margin-bottom: 2px !important;
    }
    .hf-app-container.hf-flow-embed-steps .hf-step1-main-card .hf-step-desc {
        font-size: 13px !important;
        margin-bottom: 10px !important;
    }
    .hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-variations-grid {
        gap: 7px;
    }
    .hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-tile {
        min-height: 54px !important;
        padding: 8px 30px 8px 10px !important;
        font-size: 12.5px !important;
    }
    .hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-tile.hf-tile-has-texture,
    .hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-tile.hf-tile-product-swatch {
        min-height: 62px !important;
    }
    .hf-app-container.hf-flow-embed-steps .hf-variant-price { margin: -6px 0 10px; }
    .hf-app-container.hf-flow-embed-steps .hf-drop-zone {
        padding: 18px 16px !important;
    }
    .hf-app-container.hf-flow-embed-steps .hf-drop-zone .hf-drop-icon svg {
        width: 34px; height: 34px;
    }
    .hf-app-container.hf-flow-embed-steps .hf-drop-zone > p {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }

    /* ---- TRIN 2: canvas + toolbar + CTA i eet viewport ---- */
    .hf-app-container.hf-flow-embed-steps .hf-step2-mask-card {
        padding: 14px 20px 16px !important;
    }
    .hf-app-container.hf-flow-embed-steps .hf-step2-mask-card .hf-step-title {
        font-size: 18px !important;
        margin-bottom: 2px !important;
    }
    .hf-app-container.hf-flow-embed-steps .hf-step2-mask-card .hf-step-desc {
        font-size: 13px !important;
        margin-bottom: 8px !important;
    }
    body.hf-visualizer-embed .hf-app-container.hf-step-mode[data-hf-active-step="2"] [id^="canvas-wrapper-"] {
        height: clamp(280px, calc(100dvh - 452px), 560px) !important;
        min-height: clamp(280px, calc(100dvh - 452px), 560px) !important;
        max-height: clamp(280px, calc(100dvh - 452px), 560px) !important;
    }
    .hf-app-container.hf-flow-embed-steps .hf-canvas-stage {
        padding: clamp(14px, 1.8vw, 22px) !important;
    }

    /* ---- TRIN 3: resultat + handlingsraekke + CTA i eet viewport ---- */
    .hf-app-container.hf-flow-embed-steps .hf-step3-result-card {
        padding: 14px 20px 16px !important;
    }
    .hf-app-container.hf-flow-embed-steps .hf-step3-result-card .hf-step-title {
        font-size: 18px !important;
        margin-bottom: 6px !important;
    }
    .hf-app-container.hf-flow-embed-steps .hf-comparison-container {
        max-width: min(100%, calc((100dvh - 452px) * 1.7778));
        margin-inline: auto;
    }
    .hf-result-actionrow { margin-top: 10px; }
}

/* ============================================================================
   M3 — KOMPAKT VARIANTPANEL (Kenni 08-08): swatch-kort + chips, radiogroup,
   EEN rolig valgt-tilstand. Overstyrer aeldre .hf-tile-identitet i panelet.
   ============================================================================ */
.hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-variations-grid.hf-group-colors {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
    gap: 8px;
}
.hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-variations-grid.hf-group-heights {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
    gap: 7px;
}
@media (max-width: 768px) {
    .hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-variations-grid.hf-group-colors {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
    .hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-variations-grid.hf-group-heights {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

/* Faelles: nulstil gammel tile-identitet (tekstur/scrim/dobbeltring) i panelet */
.hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-tile {
    background-image: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    color: var(--hf-ink) !important;
    border: 1.5px solid var(--hf-line) !important;
    border-radius: var(--hf-r-s) !important;
    overflow: visible !important;
    position: relative;
}
.hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-tile.active {
    border: 2px solid var(--hf-brand) !important;
    background-color: var(--hf-brand-tint) !important;
    box-shadow: none !important;
    color: var(--hf-ink) !important;
}
.hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-tile.active::after {
    content: "" !important;
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    left: auto !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50%;
    background: var(--hf-brand) url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="3.4" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M20 6 9 17l-5-5"/%3E%3C/svg%3E') center/10px no-repeat !important;
    z-index: 2;
}

/* Farver: billed-swatch-kort - tydeligt produktfoto UDEN overlay, label separat */
.hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-tile.hf-swatch-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px;
    min-height: 0 !important;
    padding: 6px 6px 8px !important;
    background-color: var(--hf-card);
}
.hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-swatch-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border-radius: 6px;
    background-color: var(--hf-line-soft);
    background-image: var(--hf-swatch-image);
    background-size: cover;
    background-position: center;
}
.hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-swatch-label {
    display: block;
    font: 700 12.5px/1.25 var(--hf-font-display);
    color: var(--hf-ink);
    text-align: center;
    white-space: normal;
}
.hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-tile.hf-swatch-card.active .hf-swatch-label { color: var(--hf-brand-deep); }

/* Hoejder: kompakte 48px chips */
.hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-tile.hf-chip {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 48px !important;
    padding: 8px 26px 8px 10px !important;
    font: 700 13px/1.2 var(--hf-font-display) !important;
    text-align: center !important;
    background-color: var(--hf-card);
}
.hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-tile.hf-chip.active { padding-right: 26px !important; }

/* 'Valgt: ...' som kompakt panel-footer */
.hf-app-container.hf-flow-embed-steps .hf-step-selection-feedback {
    margin-top: 10px !important;
    font: 700 12.5px/1.3 var(--hf-font-display) !important;
    color: var(--hf-brand-deep) !important;
}
.hf-app-container.hf-flow-embed-steps .hf-step-selection-feedback span { color: inherit !important; }

/* Desktop-kompakt: preview-billedet i panelet skjules (swatches viser produktet) */
@media (min-width: 1024px) {
    .hf-app-container.hf-flow-embed-steps .hf-inline-variant [id^="hf-preview-image-"] { display: none !important; }
    .hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-tile.hf-chip { min-height: 44px !important; }
}


/* Codex-retest: legacy ::before-tint paa valgt swatch neutraliseres i panelet */
.hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-tile::before {
    content: none !important;
}
/* Belt & braces: trin1-grid maa aldrig tabes til inline-display (>=1024) */
@media (min-width: 1024px) {
    .hf-app-container.hf-flow-embed-steps.hf-step-mode .hf-step1-main-card.is-active {
        display: grid !important;
    }
}


/* Codex-defensiv: gruppemargen via klasser (inline-styles fjernet i builder) + fladt desktop-swatchfoto */
.hf-app-container.hf-flow-embed-steps .hf-variant-group { margin-bottom: 12px; }
.hf-app-container.hf-flow-embed-steps .hf-variant-group-label {
    margin-bottom: 6px;
    font: 700 12.5px/1.2 var(--hf-font-display);
    color: var(--hf-ink);
}
@media (min-width: 1024px) {
    .hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-swatch-img {
        aspect-ratio: auto;
        height: 68px;
    }
}

/* ============================================================================
   M3 — DESKTOP-BREDDEUDNYTTELSE (Kenni 08-08 15:18): faelles fluid bredde for
   nav + kort (max ~1240px, sikre sidekanter), 46/54-kolonner, bevidst roligere
   komposition paa store flader (>=1600px). KUN desktop - mobil uroert.
   Ingen transforms, ingen viewport-hacks, ingen nested scroll.
   ============================================================================ */
@media (min-width: 1024px) {
    body.hf-visualizer-embed .hf-app-container.hf-flow-embed-steps .hf-steps-wrapper,
    .hf-app-container.hf-flow-embed-steps.hf-step-mode .hf-step-nav {
        max-width: min(1240px, calc(100% - clamp(32px, 5vw, 112px)));
        margin-inline: auto;
    }
    .hf-app-container.hf-flow-embed-steps.hf-step-mode .hf-step-nav {
        padding-inline: 16px;
        box-sizing: border-box;
    }
    /* 46/54-balance: variant venstre, foto/upload udnytter hoejre */
    .hf-app-container.hf-flow-embed-steps .hf-step1-main-card {
        grid-template-columns: minmax(0, 46fr) minmax(0, 54fr);
    }
    /* Hoejre kolonnes foto-preview maa fylde kolonnen */
    .hf-app-container.hf-flow-embed-steps .hf-upload-preview-stage img.hf-upload-preview-image {
        width: 100%;
        max-height: clamp(220px, 34dvh, 420px);
        object-fit: cover;
        border-radius: var(--hf-r-s);
    }
}

@media (min-width: 1600px) {
    /* Bevidst mere ro paa store arbejdsflader - naturlig stoerre komposition */
    .hf-app-container.hf-flow-embed-steps .hf-step1-main-card {
        padding: 22px 30px 20px !important;
        column-gap: 40px;
    }
    .hf-app-container.hf-flow-embed-steps .hf-step1-main-card > .hf-inline-variant {
        padding-right: 32px !important;
    }
    .hf-app-container.hf-flow-embed-steps .hf-step1-main-card .hf-step-title {
        font-size: 20px !important;
        margin-bottom: 4px !important;
    }
    .hf-app-container.hf-flow-embed-steps .hf-step1-main-card .hf-step-desc {
        font-size: 14px !important;
        margin-bottom: 14px !important;
    }
    .hf-app-container.hf-flow-embed-steps .hf-variant-group { margin-bottom: 16px; }
    .hf-app-container.hf-flow-embed-steps .hf-variant-group-label {
        margin-bottom: 8px;
        font-size: 13.5px;
    }
    .hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-variations-grid.hf-group-colors { gap: 10px; }
    .hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-variations-grid.hf-group-heights { gap: 9px; }
    .hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-swatch-img { height: 86px; }
    .hf-app-container.hf-flow-embed-steps .hf-inline-variant .hf-tile.hf-chip { min-height: 50px !important; }
    .hf-app-container.hf-flow-embed-steps .hf-drop-zone { padding: 26px 20px !important; }
    .hf-app-container.hf-flow-embed-steps .hf-drop-zone .hf-drop-icon svg { width: 40px; height: 40px; }
    .hf-app-container.hf-flow-embed-steps .hf-drop-zone > p { font-size: 15px !important; }
}