/* LKH Secure – rozwijane menu w nagłówku i pasek zakładek (12.11.2026). Ładowane, gdy LKH Secure jest widoczne. */

/* ---------- przycisk w nagłówku (wygląd jak pozostałe linki menu) ---------- */
.ms-menu { position: static; }
.ms-przycisk {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .65rem .78rem; border: 0; border-radius: 8px; background: transparent;
    color: var(--lkh-opis, #334155); font: inherit; font-size: .95rem; font-weight: 750; line-height: 1; white-space: nowrap; cursor: pointer;
}
.ms-przycisk:hover, .ms-przycisk.active, .ms-otwarte .ms-przycisk { color: var(--lkh-tekst, #0f172a); background: var(--lkh-panel, rgba(37, 99, 235, .08)); }
.ms-strzalka { font-size: .7rem; transition: transform .2s; }
.ms-otwarte .ms-strzalka { transform: rotate(180deg); }
body.dark-mode .ms-przycisk { color: var(--lkh-opis, #cbd5e1); }
body.dark-mode .ms-przycisk:hover, body.dark-mode .ms-przycisk.active, body.dark-mode .ms-otwarte .ms-przycisk { color: var(--lkh-tekst, #fff); background: var(--lkh-panel, rgba(148, 163, 184, .14)); }

/* ---------- panel ---------- */
.ms-panel {
    position: fixed; left: 0; right: 0; top: var(--ms-gora, 76px); z-index: 1200;
    background: var(--lkh-powierzchnia, #fff); border-top: 1px solid var(--lkh-linia, #e2e8f0); border-bottom: 1px solid var(--lkh-linia, #e2e8f0);
    box-shadow: 0 24px 48px rgba(15, 23, 42, .14);
    max-height: calc(100vh - var(--ms-gora, 76px)); overflow-y: auto;
}
.ms-panel[hidden] { display: none; }
.ms-kolumny { max-width: 1240px; margin: 0 auto; padding: 1.6rem 1.5rem 1rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.6rem; }
.ms-kolumna ul { list-style: none; margin: .7rem 0 0; padding: 0; display: grid; gap: .15rem; }
.ms-panel a, .ms-panel a::after { all: unset; }
.ms-panel a { cursor: pointer; }
.ms-naglowek { display: flex !important; align-items: center; gap: .55rem; font-weight: 800; font-size: 1rem; color: var(--lkh-tekst, #0f172a); }
.ms-naglowek i { width: 2rem; height: 2rem; display: grid; place-items: center; border-radius: .6rem; background: rgba(0, 116, 109, .1); color: var(--lkh-akcent, #00746d); font-size: .95rem; }
.ms-naglowek:hover span { text-decoration: underline; }
.ms-opis { margin: .5rem 0 0; font-size: .86rem; line-height: 1.45; color: var(--lkh-opis, #50636e); }
.ms-kolumna li a { display: block; padding: .38rem .5rem; margin-left: -.5rem; border-radius: .45rem; font-size: .92rem; color: var(--lkh-tekst, #14252e); }
.ms-kolumna li a:hover, .ms-kolumna li a:focus-visible { background: var(--lkh-panel, #edf2f3); color: var(--lkh-akcent, #00746d); }
.ms-stopka { max-width: 1240px; margin: 0 auto; padding: .8rem 1.5rem 1.1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; border-top: 1px solid var(--lkh-linia, #e2e8f0); font-size: .86rem; color: var(--lkh-opis, #50636e); }
.ms-stopka a { color: var(--lkh-opis, #50636e); }
.ms-stopka a:hover { text-decoration: underline; }
.ms-stopka .ms-wszystko { font-weight: 800; color: var(--lkh-akcent, #00746d); display: inline-flex !important; align-items: center; gap: .4rem; }

/* ---------- telefon i tablet: rozwinięcie w menu mobilnym ---------- */
@media (max-width: 1200px) {
    .ms-menu { width: 100%; }
    .ms-przycisk { width: 100%; justify-content: space-between; padding: .9rem 1rem; font-size: 1rem; }
    .ms-panel { position: static; box-shadow: none; border: 0; max-height: none; background: transparent; }
    .ms-kolumny { grid-template-columns: 1fr; gap: 1rem; padding: .4rem 1rem .6rem 1.2rem; }
    .ms-opis { display: none; }
    .ms-kolumna ul { margin-top: .3rem; }
    .ms-stopka { flex-direction: column; align-items: flex-start; padding: .6rem 1rem .9rem 1.2rem; }
}

/* ---------- pasek zakładek na stronach LKH Secure ---------- */
.ms-zakladki { background: var(--lkh-powierzchnia, #fff); border-bottom: 1px solid var(--lkh-linia, #e2e8f0); position: relative; z-index: 5; }
.ms-zakladki .container { display: flex; gap: .3rem; overflow-x: auto; scrollbar-width: none; padding-top: .55rem; padding-bottom: .55rem; }
.ms-zakladki .container::-webkit-scrollbar { display: none; }
.ms-zakladki a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .9rem; border-radius: 999px; font-size: .9rem; font-weight: 700; color: var(--lkh-opis, #50636e); text-decoration: none; white-space: nowrap; }
.ms-zakladki a:hover { background: var(--lkh-panel, #edf2f3); color: var(--lkh-tekst, #14252e); }
.ms-zakladki a.aktywna { background: var(--lkh-akcent, #00746d); color: #fff; }
.ms-zakladki a i { font-size: .85rem; }

/* ---------- strona przeglądu: kafelki produktów ---------- */
.ms-kafle { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-top: 1.8rem; }
.ms-kafel { display: flex; flex-direction: column; gap: .6rem; padding: 1.4rem; border-radius: 1.1rem; border: 1px solid var(--lkh-linia, #e2e8f0); background: var(--lkh-powierzchnia, #fff); color: var(--lkh-tekst, #14252e); text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
.ms-kafel:hover, .ms-kafel:focus-visible { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(15, 23, 42, .12); border-color: var(--lkh-akcent, #00746d); }
.ms-kafel h3 { margin: .2rem 0 0; font-size: 1.15rem; }
.ms-kafel p { margin: 0; font-size: .92rem; line-height: 1.5; color: var(--lkh-opis, #50636e); flex: 1; }
.ms-kafel-dol { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding-top: .7rem; border-top: 1px solid var(--lkh-linia, #e2e8f0); font-size: .9rem; }
.ms-kafel-dol b { color: var(--lkh-tekst, #14252e); }
.ms-kafel-dol span { color: var(--lkh-akcent, #00746d); font-weight: 700; }

/* ---------- krótki nagłówek podstrony (Dom i rodzina) ---------- */
.ms-strona-naglowek { padding: clamp(2.2rem, 5vw, 3.6rem) 0 clamp(1.8rem, 4vw, 2.6rem); background: radial-gradient(ellipse at 80% 0%, rgba(56, 189, 248, .12), transparent 60%), var(--lkh-tlo, #f5f7f8); }
.ms-strona-naglowek h1 { max-width: 820px; margin: .4rem 0 1rem; font-size: clamp(2rem, 4.2vw, 3.2rem); line-height: 1.08; color: var(--lkh-tekst, #14252e); }
.ms-strona-naglowek > .container > p:not(.cs-nadtytul) { max-width: 720px; font-size: 1.08rem; line-height: 1.6; color: var(--lkh-opis, #50636e); margin: 0 0 1.4rem; }

/* Menu mobilne nagłówka nadaje wszystkim linkom .nav-links a min. 46 px i duży padding – w panelu LKH Secure wyłączamy to. */
.nav-links .ms-panel a { min-height: 0 !important; width: auto !important; box-shadow: none !important; }
.nav-links .ms-panel li { border: 0 !important; margin: 0 !important; padding: 0 !important; width: auto !important; }
@media (max-width: 1200px) {
    .nav-links .ms-kolumna li a { display: block !important; padding: .45rem .55rem !important; }
    .nav-links .ms-naglowek { padding: .35rem 0 !important; }
    .nav-links .ms-stopka a { padding: .25rem 0 !important; }
    .nav-links .ms-stopka span { display: flex; gap: .9rem; }
    .nav-links .ms-kolumna ul { gap: 0; }
}

/* 12.11.2026 – uproszczenie: porównanie Rodzina/Router zwinięte, pełny zakres pakietu w rozwinięciu karty. */
body.styl-lkh .lkh-secure-porownanie > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 1.1rem; border: 1px solid var(--lkh-linia, #e2e8f0); border-radius: .6rem; background: var(--lkh-panel, transparent); }
body.styl-lkh .lkh-secure-porownanie > summary::-webkit-details-marker { display: none; }
body.styl-lkh .lkh-secure-porownanie > summary h3 { margin: 0; }
body.styl-lkh .lkh-secure-porownanie > summary > i { transition: transform .2s; }
body.styl-lkh .lkh-secure-porownanie[open] > summary > i { transform: rotate(45deg); }
body.styl-lkh .lkh-secure-porownanie[open] .lkh-secure-porownanie-tabela { margin-top: .8rem; }
body.styl-lkh .lkh-secure-szczegoly > ul { margin: .8rem 0 .6rem; }

/* 12.11.2026 (2): menu = 4 kafle, każdy prowadzi do innej strony (bez kotwic). */
.ms-kafle-menu { list-style: none; max-width: 1240px; margin: 0 auto; padding: 1.4rem 1.5rem 1.1rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; }
.ms-panel .ms-pozycja { display: flex !important; flex-direction: column; gap: .45rem; height: 100%; box-sizing: border-box; padding: 1rem 1rem .9rem; border-radius: .9rem; border: 1px solid var(--lkh-linia, #e2e8f0); color: var(--lkh-tekst, #14252e); transition: border-color .15s, background .15s, transform .15s; }
.ms-panel .ms-pozycja > i { width: 2.2rem; height: 2.2rem; display: grid; place-items: center; border-radius: .65rem; background: rgba(0, 116, 109, .1); color: var(--lkh-akcent, #00746d); font-size: 1rem; }
.ms-pozycja b { font-size: 1rem; font-weight: 800; }
.ms-pozycja .ms-opis { margin: 0; flex: 1; }
.ms-dopisek { font-size: .84rem; font-weight: 750; color: var(--lkh-akcent, #00746d); display: inline-flex; align-items: center; gap: .35rem; }
.ms-dopisek i { font-size: .72rem; transition: transform .15s; }
.ms-panel .ms-pozycja:hover, .ms-panel .ms-pozycja:focus-visible { border-color: var(--lkh-akcent, #00746d); background: var(--lkh-panel, #edf2f3); transform: translateY(-2px); }
.ms-pozycja:hover .ms-dopisek i { transform: translateX(3px); }
.ms-panel .ms-pozycja.ms-biezaca { border-color: var(--lkh-akcent, #00746d); }
@media (max-width: 1200px) {
    .ms-kafle-menu { grid-template-columns: 1fr; gap: .2rem; padding: .3rem 1rem .5rem 1rem; }
    .nav-links .ms-panel .ms-pozycja { display: grid !important; grid-template-columns: 2.2rem 1fr; column-gap: .75rem; row-gap: .1rem; align-items: center; padding: .55rem .6rem !important; border: 0; border-radius: .6rem; }
    .ms-panel .ms-pozycja > i { grid-row: span 2; }
    .ms-pozycja .ms-opis { display: none; }
    .ms-pozycja .ms-dopisek { grid-column: 2; font-size: .8rem; }
    .ms-pozycja .ms-dopisek i { display: none; }
    .ms-panel .ms-pozycja:hover { transform: none; }
    .ms-panel .ms-pozycja.ms-biezaca { background: var(--lkh-panel, #edf2f3); }
}
@media (max-width: 1200px) { .nav-links .ms-stopka .ms-stopka-opis { display: none; } }