/* Plik: vindu-modern.css (2026-10-05)
   Nowy wyglad: lewe menu + zakladka Vindu (z podgladem koszyka).
   Wszystko zawezone do #lewy-panel-narzedzi i #konfigurator-widok - pozostale zakladki bez zmian. */

:root {
    --vm-bg: #f2f4f8;
    --vm-flate: #ffffff;
    --vm-flate-2: #f7f8fb;
    --vm-kant: #e3e7ee;
    --vm-kant-sterk: #cfd6e1;
    --vm-tekst: #1c2433;
    --vm-tekst-2: #5b6576;
    --vm-tekst-3: #8a93a3;
    --vm-blå: #2563eb;
    --vm-blå-lys: #eaf1ff;
    --vm-grønn: #16a34a;
    --vm-grønn-mørk: #12823b;
    --vm-oransje: #f59e0b;
    --vm-rød: #dc2626;
    --vm-meny: #151c2c;
    --vm-meny-2: #1f2840;
    --vm-radius: 12px;
    --vm-radius-s: 8px;
    --vm-skygge: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
    --vm-skygge-l: 0 8px 24px rgba(16, 24, 40, .10);
    --vm-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ============ LEWE MENU ============ */
#lewy-panel-narzedzi {
    width: 64px;
    background: linear-gradient(180deg, var(--vm-meny) 0%, var(--vm-meny-2) 100%);
    padding: 12px 8px;
    box-sizing: border-box;
    font-family: var(--vm-font);
    box-shadow: 1px 0 0 rgba(255, 255, 255, .04), 4px 0 18px rgba(0, 0, 0, .12);
}
#lewy-panel-narzedzi.expanded { width: 214px; }

#lewy-panel-narzedzi .tool-icon {
    height: 44px;
    margin: 2px 0;
    padding: 0;
    border-radius: 10px;
    color: #9aa6bd;
    gap: 12px;
}
#lewy-panel-narzedzi.expanded .tool-icon { padding-left: 12px; }
#lewy-panel-narzedzi .tool-icon:hover { background: rgba(255, 255, 255, .07); color: #fff; }
/* globalna regula ".active:after" (akordeony) doklejala "−" do aktywnej ikony */
#lewy-panel-narzedzi .tool-icon:after { content: none; }
#lewy-panel-narzedzi .tool-icon.active {
    background: var(--vm-blå);
    color: #fff;
    box-shadow: 0 4px 12px rgba(37, 99, 235, .35);
}
#lewy-panel-narzedzi .icon-short {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
}
#lewy-panel-narzedzi .icon-short i { font-size: 22px; }
#lewy-panel-narzedzi .icon-full { font-size: 14px; font-weight: 500; letter-spacing: .1px; }
#lewy-panel-narzedzi .tool-sep {
    width: 60%;
    height: 1px;
    margin: 10px auto;
    background: rgba(255, 255, 255, .1);
}
#lewy-panel-narzedzi .tool-badge {
    position: absolute;
    top: -7px;
    right: -10px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 9px;
    background: var(--vm-grønn);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
    border: 2px solid var(--vm-meny);
}
#lewy-panel-narzedzi .tool-badge[hidden] { display: none; }
#lewy-panel-narzedzi .dolne-ikony .tool-icon {
    background: transparent !important;
    color: #f19999;
}
#lewy-panel-narzedzi .dolne-ikony .tool-icon:hover { background: rgba(220, 38, 38, .18) !important; color: #fff; }

/* ============ ZAKLADKA VINDU – RAMA ============ */
#konfigurator-widok {
    background: var(--vm-bg);
    padding: 12px;
    gap: 12px;
    font-family: var(--vm-font);
    color: var(--vm-tekst);
    min-width: 0;
    height: 100vh;
}

/* --- wstazka (kolory, kod produktu, przycisk koszyka) --- */
#konfigurator-widok #loken-ribbon-bar {
    background: var(--vm-flate);
    border: 1px solid var(--vm-kant);
    border-radius: var(--vm-radius);
    box-shadow: var(--vm-skygge);
    padding: 8px 10px 8px 14px;
    align-items: center;
    gap: 10px;
}
#konfigurator-widok #ribbon-content-wrapper { gap: 6px; align-items: center; flex-wrap: wrap; max-height: 220px; }
#konfigurator-widok #loken-ribbon-bar.collapsed #ribbon-content-wrapper { max-height: 0; }
@media (max-width: 1400px) {
    #konfigurator-widok .ribbon-text-search { width: 140px !important; }
    #konfigurator-widok .ribbon-item label[for^="ribbon-color-swatch"] { display: none; }
}
#konfigurator-widok .ribbon-group { padding: 4px 8px; border-radius: var(--vm-radius-s); }
#konfigurator-widok .ribbon-group + .ribbon-group { border-left: 1px solid var(--vm-kant) !important; border-radius: 0; }
#konfigurator-widok .ribbon-group-title {
    border-bottom: none;
    color: var(--vm-tekst-3);
    font-size: 10.5px;
    letter-spacing: .5px;
    margin-right: 4px;
    max-width: 70px;
    line-height: 1.25;
}
#konfigurator-widok .ribbon-item label { font-size: 11px; color: var(--vm-tekst-2); font-weight: 500; }
#konfigurator-widok .ribbon-text-search,
#konfigurator-widok .ribbon-color-picker,
#konfigurator-widok .ribbon-tillegg-btn {
    height: 32px;
    border-radius: var(--vm-radius-s);
    border-color: var(--vm-kant-sterk);
}
#konfigurator-widok .ribbon-color-picker { width: 44px; }
#konfigurator-widok #ribbon-toggle-btn {
    width: 32px;
    height: 32px;
    border-radius: var(--vm-radius-s);
    border-color: var(--vm-kant);
    margin-left: 0;
    color: var(--vm-tekst-2);
}

/* przycisk "Handlekurv" na wstazce */
.vkp-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 36px;
    padding: 0 12px;
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
    border: 1px solid var(--vm-kant-sterk);
    border-radius: 10px;
    background: var(--vm-flate);
    color: var(--vm-tekst);
    font: 600 13px var(--vm-font);
    cursor: pointer;
    transition: background .15s, border-color .15s, color .15s;
}
.vkp-toggle i { font-size: 18px; }
.vkp-toggle:hover { border-color: var(--vm-blå); color: var(--vm-blå); }
.vkp-toggle.aktiv { background: var(--vm-blå-lys); border-color: var(--vm-blå); color: var(--vm-blå); }
.vkp-toggle-sum { font-weight: 500; color: var(--vm-tekst-2); font-variant-numeric: tabular-nums; }
.vkp-toggle-sum:empty { display: none; }
.vkp-badge {
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 10px;
    background: var(--vm-grønn);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 20px;
    text-align: center;
}
.vkp-badge[hidden] { display: none; }
.pulser { animation: vm-pulser .5s ease; }
@keyframes vm-pulser { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }

/* --- trzy obszary: rysunek | opcje | (koszyk) --- */
#konfigurator-widok .konfigurator-glowny {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    gap: 12px;
    min-height: 0;
    overflow: hidden;
}
#konfigurator-widok .kolumna {
    background: var(--vm-flate);
    border: 1px solid var(--vm-kant);
    border-radius: var(--vm-radius);
    box-shadow: var(--vm-skygge);
    padding: 16px;
    min-height: 0;
}
#konfigurator-widok .kolumna-rysunek { flex: 1 1 auto; min-width: 0; }
#konfigurator-widok .kolumna-opcje {
    flex: 0 0 clamp(360px, 34%, 520px);
    overflow-y: auto;
    scrollbar-width: thin;
}
/* sekcje opcji maja swoja wysokosc - kolumna przewija sie zamiast je sciskac */
#konfigurator-widok .kolumna-opcje > * { flex-shrink: 0; }
/* rysunek miesci sie w karcie (procentowe max-height SVG potrzebuje okreslonej wysokosci) */
#konfigurator-widok #rysunek-wrapper { min-height: 0; height: 100%; }
#konfigurator-widok #obszar-rysunkowy { height: 100%; min-height: 0; }

/* --- rysunek --- */
#konfigurator-widok #obszar-rysunkowy {
    border: 1px solid var(--vm-kant);
    border-radius: 10px;
    background-color: #fbfcfe;
    background-image: radial-gradient(circle, #e2e7ef 1px, transparent 1px);
    background-size: 18px 18px;
}
#konfigurator-widok #kierunek-kontener-rysunek { gap: 6px !important; margin-left: 12px !important; }
#konfigurator-widok .kierunek-btn-rysunek {
    width: 42px;
    height: 38px;
    border-radius: var(--vm-radius-s);
    border: 1px solid var(--vm-kant-sterk);
    background: var(--vm-flate);
    color: var(--vm-tekst-2);
    font: 700 12px var(--vm-font);
    transition: background .15s, color .15s, border-color .15s;
}
#konfigurator-widok .kierunek-btn-rysunek:hover { border-color: var(--vm-blå); color: var(--vm-blå); }
#konfigurator-widok .kierunek-btn-rysunek.selected { background: var(--vm-tekst); border-color: var(--vm-tekst); color: #fff; }
#konfigurator-widok .kierunek-btn-rysunek.active-blue { background: var(--vm-blå); border-color: var(--vm-blå); color: #fff; }
#konfigurator-widok .kierunek-btn-rysunek.active-red { background: var(--vm-rød); border-color: var(--vm-rød); color: #fff; }
#konfigurator-widok #kierunek-kontener-rysunek hr { border-top-color: var(--vm-kant) !important; }

/* --- przyciski akcji --- */
#konfigurator-widok .przyciski-akcji { gap: 8px; margin: 0 0 14px; flex-wrap: wrap; }
#konfigurator-widok .przyciski-akcji button {
    height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    font: 600 14px var(--vm-font);
    transition: background .15s, transform .05s, box-shadow .15s;
}
#konfigurator-widok .przyciski-akcji button:active { transform: translateY(1px); }
#konfigurator-widok .przyciski-akcji button[hidden] { display: none; }
#konfigurator-widok .przyciski-akcji button:disabled { opacity: .5; cursor: not-allowed; }
#konfigurator-widok .przycisk-glowny {
    flex: 1 1 100%;
    background: var(--vm-grønn);
    border: 1px solid var(--vm-grønn);
    color: #fff;
    box-shadow: 0 2px 6px rgba(22, 163, 74, .25);
}
#konfigurator-widok .przycisk-glowny:hover:not(:disabled) { background: var(--vm-grønn-mørk); filter: none; }
#konfigurator-widok .przycisk-glowny.lagt-til { background: var(--vm-grønn-mørk); }
#konfigurator-widok #loken-save-to-main-cart-btn {
    flex: 1 1 auto;
    background: var(--vm-oransje);
    border: 1px solid var(--vm-oransje);
    color: #fff;
}
#konfigurator-widok .przycisk-avbryt {
    flex: 0 0 auto;
    background: var(--vm-flate);
    border: 1px solid var(--vm-kant-sterk);
    color: var(--vm-tekst-2);
}
#konfigurator-widok .przycisk-avbryt:hover { background: var(--vm-flate-2); filter: none; }
/* w trybie edycji: Lagre + Avbryt w pierwszym rzedzie, "Legg til som ny" pod spodem */
#konfigurator-widok .przyciski-akcji:has(#loken-save-to-main-cart-btn:not([hidden])) .przycisk-glowny {
    order: 2;
    height: 36px;
    background: var(--vm-flate);
    border-color: var(--vm-kant-sterk);
    color: var(--vm-grønn-mørk);
    box-shadow: none;
}

.redigerer-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    background: #fff7e6;
    border: 1px solid #fde1a6;
    color: #8a5a00;
    font-size: 13px;
    font-weight: 600;
}
.redigerer-banner[hidden] { display: none; }

/* --- marka / material / pola --- */
#konfigurator-widok .config-row-compact { padding: 4px 0 10px; }
#konfigurator-widok .opcja-grupa-compact {
    gap: 2px;
    padding: 3px;
    background: var(--vm-flate-2);
    border: 1px solid var(--vm-kant);
    border-radius: 10px;
}
#konfigurator-widok .brand-btn,
#konfigurator-widok .material-btn {
    border: none;
    background: transparent;
    border-radius: 7px;
    padding: 7px 14px;
    color: var(--vm-tekst-2);
    font: 600 13px var(--vm-font);
}
#konfigurator-widok .brand-btn:hover,
#konfigurator-widok .material-btn:hover { background: rgba(0, 0, 0, .04); }
#konfigurator-widok .brand-btn.selected,
#konfigurator-widok .material-btn.selected {
    background: var(--vm-flate);
    color: var(--vm-tekst);
    box-shadow: var(--vm-skygge);
}
#konfigurator-widok .brand-btn.selected { color: var(--vm-blå); }
#konfigurator-widok .vertical-sep { background: var(--vm-kant); }

#konfigurator-widok label { font-weight: 600; font-size: 13px; color: var(--vm-tekst-2); }
#konfigurator-widok input[type="number"],
#konfigurator-widok input[type="text"],
#konfigurator-widok select,
#konfigurator-widok textarea {
    border: 1px solid var(--vm-kant-sterk);
    border-radius: var(--vm-radius-s);
    padding: 8px 10px;
    font-family: var(--vm-font);
    color: var(--vm-tekst);
    background-color: var(--vm-flate);
    transition: border-color .15s, box-shadow .15s;
}
#konfigurator-widok input:focus,
#konfigurator-widok select:focus,
#konfigurator-widok textarea:focus {
    outline: none;
    border-color: var(--vm-blå);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
}
#konfigurator-widok .dim-btn {
    height: 37px;
    border-color: var(--vm-kant-sterk);
    background: var(--vm-flate-2);
    color: var(--vm-tekst-2);
}
#konfigurator-widok .dim-btn.minus { border-radius: var(--vm-radius-s) 0 0 var(--vm-radius-s); }
#konfigurator-widok .dim-btn.plus { border-radius: 0 var(--vm-radius-s) var(--vm-radius-s) 0; }

/* --- akordeony (sekcje opcji) --- */
#konfigurator-widok #dodatkowe-opcje-kontener {
    margin: 0;
    border: 1px solid var(--vm-kant);
    border-radius: var(--vm-radius);
    overflow: hidden;
}
#konfigurator-widok .accordion {
    background: var(--vm-flate);
    color: var(--vm-tekst);
    padding: 13px 14px;
    font: 600 14px var(--vm-font);
    border-bottom: 1px solid var(--vm-kant);
    transition: background .15s;
}
#konfigurator-widok .accordion:not(.disabled):hover,
#konfigurator-widok .accordion.active { background: var(--vm-flate-2); }
#konfigurator-widok .accordion.active { color: var(--vm-blå); }
#konfigurator-widok .accordion:after {
    content: '';
    width: 7px;
    height: 7px;
    margin-top: 4px;
    margin-right: 3px;
    border-right: 2px solid var(--vm-tekst-3);
    border-bottom: 2px solid var(--vm-tekst-3);
    transform: rotate(45deg);
    transition: transform .2s;
}
#konfigurator-widok .accordion.active:after { transform: rotate(-135deg); margin-top: 8px; border-color: var(--vm-blå); }
#konfigurator-widok .panel { border-left: none; border-right: none; padding: 0 14px; }
#konfigurator-widok .panel.active,
#konfigurator-widok .accordion.active + .panel { border-bottom: 1px solid var(--vm-kant); }
#konfigurator-widok .gi-header-wrapper .accordion { border-right: none; }
#konfigurator-widok .reset-btn-header {
    height: 46px;
    background: var(--vm-flate);
    border-bottom: 1px solid var(--vm-kant);
    color: var(--vm-tekst-3);
}
#konfigurator-widok .reset-btn-header:hover { color: var(--vm-blå); background: var(--vm-flate-2); }
#konfigurator-widok .accordion.gi-accordion {
    padding: 9px 12px;
    font-size: 13px;
    background: var(--vm-flate);
    border-bottom: none;
    border-radius: var(--vm-radius-s);
}
#konfigurator-widok .accordion.gi-accordion:after { margin-left: 10px; flex-shrink: 0; }
#konfigurator-widok .accordion.gi-accordion:hover,
#konfigurator-widok .accordion.gi-accordion.active { background: var(--vm-flate-2); color: var(--vm-tekst); }
#konfigurator-widok .gi-accordion-label { color: var(--vm-tekst); }
#konfigurator-widok .gi-accordion-value { color: var(--vm-blå); }
#konfigurator-widok .gi-accordion-wrapper { border-bottom-color: var(--vm-kant); }
#konfigurator-widok .panel.gi-panel { border-top-color: var(--vm-kant); }

/* --- cena --- */
#konfigurator-widok #cena-kontener {
    margin-top: 14px;
    padding: 14px 16px;
    background: linear-gradient(180deg, #f7faff 0%, #eef4ff 100%);
    border: 1px solid #d4e2ff;
    border-radius: var(--vm-radius);
    font-size: 13.5px;
    color: var(--vm-tekst-2);
}
#konfigurator-widok #cena-kontener:empty { display: none; }
#konfigurator-widok .linia-ceny.suma {
    color: var(--vm-tekst);
    font-size: 20px;
    border-top-color: #d4e2ff;
    font-variant-numeric: tabular-nums;
}

#konfigurator-widok #panel-sprosser .sp-hode strong { color: var(--vm-blå); }
#konfigurator-widok .przycisk-opcji,
#konfigurator-widok .przycisk-opcji-usun { border-radius: var(--vm-radius-s); padding: 9px; font-family: var(--vm-font); }


/* ============ HANDLEKURV PRZYPIETY Z PRAWEJ ============ */
#vindu-kurv-panel {
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    opacity: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--vm-flate);
    border: 0 solid var(--vm-kant);
    border-radius: var(--vm-radius);
    box-shadow: var(--vm-skygge);
    transition: flex-basis .22s ease, opacity .18s ease;
}
#konfigurator-widok .konfigurator-glowny:not(.kurv-apen) #vindu-kurv-panel { margin-left: -12px; }
.kurv-apen #vindu-kurv-panel {
    flex-basis: clamp(330px, 26%, 400px);
    opacity: 1;
    border-width: 1px;
}
/* gdy koszyk otwarty - Vindu sie zweza (opcje moga byc wezsze, rysunek bierze reszte) */
#konfigurator-widok .kurv-apen .kolumna-opcje { flex: 0 1 clamp(320px, 32%, 480px); min-width: 300px; }
#konfigurator-widok .kurv-apen .kolumna-rysunek { min-width: 220px; }
#konfigurator-widok .kurv-apen .kolumna { padding: 14px; }

.vkp-hode {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 10px 16px;
    border-bottom: 1px solid var(--vm-kant);
    flex-shrink: 0;
    min-width: 300px;
}
.vkp-tittel { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; }
.vkp-tittel i { font-size: 18px; color: var(--vm-blå); }
.vkp-antall {
    padding: 1px 8px;
    border-radius: 10px;
    background: var(--vm-flate-2);
    border: 1px solid var(--vm-kant);
    font-size: 12px;
    color: var(--vm-tekst-2);
}
.vkp-lukk {
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--vm-radius-s);
    background: transparent;
    color: var(--vm-tekst-3);
    cursor: pointer;
    font-size: 16px;
}
.vkp-lukk:hover { background: var(--vm-flate-2); color: var(--vm-tekst); }

.vkp-liste {
    flex: 1 1 auto;
    min-height: 0;
    min-width: 300px;
    overflow-y: auto;
    padding: 8px;
    background: var(--vm-flate-2);
    scrollbar-width: thin;
}
.vkp-vare {
    padding: 10px;
    border-radius: 10px;
    background: var(--vm-flate);
    border: 1px solid var(--vm-kant);
    transition: border-color .15s, box-shadow .15s;
}
.vkp-vare + .vkp-vare { margin-top: 8px; }
.vkp-vare:hover { border-color: var(--vm-kant-sterk); }
.vkp-vare.redigeres { background: #fffaf0; border-color: #fbbf24; box-shadow: 0 0 0 3px rgba(245, 158, 11, .15); }
.vkp-vare-topp { display: flex; align-items: flex-start; gap: 10px; }
.vkp-vare-ikon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: var(--vm-radius-s);
    background: var(--vm-blå-lys);
    color: var(--vm-blå);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}
.vkp-vare-info { flex: 1 1 auto; min-width: 0; padding-top: 1px; }
.vkp-vare-navn {
    font-size: 13px;
    font-weight: 600;
    color: var(--vm-tekst);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vkp-vare-meta { font-size: 12px; color: var(--vm-tekst-3); margin-top: 1px; }
.vkp-vare-knapper { display: flex; gap: 1px; flex-shrink: 0; }
.vkp-vare-knapper button {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 7px;
    background: transparent;
    color: var(--vm-tekst-3);
    cursor: pointer;
    font-size: 14px;
}
.vkp-rediger:hover, .vkp-kopier:hover { background: var(--vm-blå-lys); color: var(--vm-blå); }
.vkp-slett:hover { background: #fdeaea; color: var(--vm-rød); }

.vkp-felter {
    display: grid;
    grid-template-columns: 62px 1fr 72px;
    gap: 6px;
    margin-top: 10px;
}
.vkp-felt { display: flex; flex-direction: column; gap: 3px; margin: 0; font-weight: 500; }
.vkp-felt span { font-size: 10.5px; color: var(--vm-tekst-3); text-transform: uppercase; letter-spacing: .3px; }
#vindu-kurv-panel .vkp-felt input,
#vindu-kurv-panel .vkp-kommentar {
    width: 100%;
    height: 32px;
    padding: 4px 8px;
    box-sizing: border-box;
    border: 1px solid var(--vm-kant-sterk);
    border-radius: 7px;
    background: var(--vm-flate);
    font: 500 13px var(--vm-font);
    color: var(--vm-tekst);
    font-variant-numeric: tabular-nums;
}
#vindu-kurv-panel .vkp-felt-pris input { font-weight: 600; }
#vindu-kurv-panel .vkp-kommentar { margin-top: 6px; font-weight: 400; color: var(--vm-tekst-2); }
#vindu-kurv-panel .vkp-kommentar:placeholder-shown { background: var(--vm-flate-2); border-style: dashed; }
#vindu-kurv-panel input:focus {
    outline: none;
    border-color: var(--vm-blå);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .15);
    background: var(--vm-flate);
}
.vkp-linjesum {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px dashed var(--vm-kant);
    font-size: 12px;
    color: var(--vm-tekst-3);
}
.vkp-linjesum strong { font-size: 14px; color: var(--vm-tekst); font-variant-numeric: tabular-nums; }

.vkp-tom { text-align: center; padding: 48px 16px; color: var(--vm-tekst-3); }
.vkp-tom i { font-size: 38px; color: var(--vm-kant-sterk); }
.vkp-tom p { margin: 10px 0 4px; font-weight: 600; color: var(--vm-tekst-2); }
.vkp-tom span { font-size: 12.5px; }

.vkp-bunn {
    flex-shrink: 0;
    min-width: 300px;
    padding: 12px 14px 14px;
    border-top: 1px solid var(--vm-kant);
    background: var(--vm-flate);
}
.vkp-rabatt-alle { margin-bottom: 10px; }
.vkp-rabatt-alle label { display: block; margin: 0 0 4px; font-size: 12px; font-weight: 600; color: var(--vm-tekst-2); }
.vkp-rabatt-rad { display: flex; gap: 6px; }
#vindu-kurv-panel .vkp-rabatt-rad input {
    flex: 1;
    height: 34px;
    padding: 4px 10px;
    border: 1px solid var(--vm-kant-sterk);
    border-radius: 8px;
    font: 500 13px var(--vm-font);
}
.vkp-rabatt-rad button {
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--vm-kant-sterk);
    border-radius: 8px;
    background: var(--vm-flate-2);
    color: var(--vm-tekst);
    font: 600 13px var(--vm-font);
    cursor: pointer;
}
.vkp-rabatt-rad button:hover { border-color: var(--vm-blå); color: var(--vm-blå); }
.vkp-sumlinje {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: var(--vm-tekst-2);
    padding: 2px 0;
    font-variant-numeric: tabular-nums;
}
.vkp-sum {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 6px 0 10px;
    padding-top: 8px;
    border-top: 1px solid var(--vm-kant);
    font-size: 13px;
    color: var(--vm-tekst-2);
}
.vkp-sum strong { font-size: 20px; color: var(--vm-tekst); font-variant-numeric: tabular-nums; }
.vkp-apne {
    width: 100%;
    height: 40px;
    border: none;
    border-radius: 10px;
    background: var(--vm-blå);
    color: #fff;
    font: 600 14px var(--vm-font);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.vkp-apne:hover { background: #1d4fd8; }

/* ============ PODPOWIEDZI KOLOROW (modules/fargevelger.js) ============ */
.fargevelger-popup {
    position: fixed;
    z-index: 100000;
    display: none;
    overflow-y: auto;
    padding: 4px;
    background: #fff;
    border: 1px solid var(--vm-kant-sterk);
    border-radius: 10px;
    box-shadow: var(--vm-skygge-l);
    font-family: var(--vm-font);
    scrollbar-width: thin;
}
.fargevelger-popup .fv-rad {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 8px;
    border-radius: 7px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--vm-tekst);
    white-space: nowrap;
}
.fargevelger-popup .fv-rad:hover,
.fargevelger-popup .fv-rad.markert { background: var(--vm-blå-lys); }
.fargevelger-popup .fv-prove {
    flex-shrink: 0;
    width: 26px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, .15);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}

/* Menu: zdjecia produktow zamiast ikon (img/meny/*.jpg) */
#lewy-panel-narzedzi .icon-short:has(.tool-foto) { width: 38px; }
#lewy-panel-narzedzi .tool-foto {
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #fff;
    object-fit: contain;
    display: block;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    transition: transform .15s, box-shadow .15s;
}
#lewy-panel-narzedzi .tool-icon:hover .tool-foto { transform: scale(1.06); }
#lewy-panel-narzedzi .tool-icon.active .tool-foto {
    box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0, 0, 0, .35);
}
#lewy-panel-narzedzi .tool-icon:has(.tool-foto) { height: 50px; }

/* Globalna regula ".active:after" (akordeony) doklejala "−" do aktywnych przyciskow filtrow ofert */
.offer-filter-btn:after,
#offers-source-switch button:after { content: none !important; }

/* Doplata Løken "Bunnglasslist (okapnik) malt i vindusfarge": przycisk wyrozniony, dopoki nie zaznaczony */
#konfigurator-widok .ribbon-tillegg-btn:not(.aktiv) {
    border-color: #f59e0b;
    background: #fffbeb;
    color: #92400e;
    font-weight: 600;
    animation: vm-glod 1.8s ease-in-out infinite;
}
#konfigurator-widok .ribbon-tillegg-btn:not(.aktiv) .pris { color: #b45309; }
#konfigurator-widok .ribbon-tillegg-btn.aktiv { border-color: var(--vm-grønn); }
@keyframes vm-glod {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, .45); }
    50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0); }
}
/* VinduLab: ta sama doplata (zakladka Profil) - wyrozniona, dopoki nie wybrana */
.gi2-chip[data-gi2="bunnglasslist"][data-val="ja"]:not(.valgt) {
    border-color: #f59e0b !important;
    background: #fffbeb !important;
    color: #92400e !important;
    animation: vm-glod 1.8s ease-in-out infinite;
}

/* ============ WSKAZNIK POSTEPU (modules/fremdrift.js) ============ */
.vb-fremdrift {
    position: fixed;
    left: 80px;
    bottom: 20px;
    z-index: 100001;
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 280px;
    padding: 14px 18px 14px 14px;
    background: #fff;
    border: 1px solid #e3e7ee;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(16, 24, 40, .18);
    font-family: "Inter", system-ui, sans-serif;
    color: #1c2433;
    opacity: 0;
    transform: translateY(12px);
    pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.vb-fremdrift.synlig { opacity: 1; transform: none; }
.vbf-ring { position: relative; width: 52px; height: 52px; flex-shrink: 0; }
.vbf-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.vbf-spor { fill: none; stroke: #e8edf4; stroke-width: 4; }
.vbf-bue {
    fill: none; stroke: #2563eb; stroke-width: 4; stroke-linecap: round;
    stroke-dasharray: 113.1; stroke-dashoffset: 113.1;
}
/* kreci sie caly czas, niezaleznie od procentow */
.vbf-ring::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: rgba(37, 99, 235, .55);
    animation: vbf-spin .9s linear infinite;
}
.vb-fremdrift.ferdig .vbf-ring::after { animation: none; border-top-color: transparent; }
.vb-fremdrift.ferdig .vbf-bue { stroke: #16a34a; }
.vbf-pst {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.vbf-tekst { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.vbf-tittel { font-size: 14px; }
.vbf-detalj { font-size: 12px; color: #5b6576; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vbf-linje { height: 4px; margin-top: 4px; border-radius: 2px; background: #e8edf4; overflow: hidden; }
.vbf-fyll { height: 100%; width: 0; background: linear-gradient(90deg, #60a5fa, #2563eb); border-radius: 2px; }
.vb-fremdrift.ferdig .vbf-fyll { background: #16a34a; }
@keyframes vbf-spin { to { transform: rotate(360deg); } }