/* LubriSyn - nadpisania na szablonie Hilo.
   Paleta wg lubrisyn-assets/paleta/kolory.md */

:root {
    --granat: #1B2747;
    --granat-ciemny: #182340;
    --czerwony: #C41E26;
    --czerwony-ciemny: #B01B22;
    --zloto: #C19B4F;
    --niebieski: #478AC9;
    --niebieski-hover: #387CBD;
    --szare-tlo: #F2F2F2;
    --szara-ramka: #E6E6E6;
}

/* Header: jasne tlo. Hilo mial tu kolor akcentu; granatowe logo wymaga jasnego tla. */
.main-nav {
    background-color: #fff;
    box-shadow: 0 2px 14px rgba(27, 39, 71, .08);
}

/* Hilo zakladalo ciemny header: linki jasnoszare, hover/active biale z !important.
   Na jasnym tle bialy tekst jest niewidoczny - stad ponizsze nadpisania. */
.main-nav nav .navbar-nav .nav-item a {
    color: var(--granat);
    text-transform: none;   /* "Strona główna", nie "Strona Główna" */
}

.main-nav nav .navbar-nav .nav-item:hover a,
.main-nav nav .navbar-nav .nav-item .active,
.main-nav nav .navbar-nav .nav-item a.active {
    color: var(--czerwony) !important;
}

.navbar-area.sticky-nav .main-nav { background-color: #fff; }

.mobile-nav { background-color: #fff; }

/* Logo: wysokosc, nie szerokosc (SVG skaluje sie sam) */
.navbar-brand img,
.footer-logo img {
    height: 46px;
    width: auto;
}

@media (max-width: 991px) {
    .navbar-brand img { height: 38px; }
}

/* Karuzela hero (ETAP 7). Bazowe style .banner-slider-* siedza w style.css
   (paleta juz podmieniona). Tu tylko uzupelnienia:
   - h1 na pierwszym slajdzie dziedziczy wyglad h2 (strona ma miec jedno h1),
   - nadtytul zlotem marki. */
.banner-slider-content h1 {
    font-size: 50px;
    color: var(--granat);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

.banner-slider-content span {
    display: block;
    margin-bottom: 10px;
    font-weight: 600;
    letter-spacing: 1px;
}

@media (max-width: 991px) {
    /* Mobilny pasek menu (.mean-bar, meanmenu.css) to position:absolute,
       55px wysokosci - naklada sie na gore sekcji. Bez tych odstepow
       obrazy hero wjezdzaly pod pasek i wygladaly na uciete. */
    .banner-slider-area { padding-top: 32px; }

    .banner-slider-content {
        padding-bottom: 90px;
    }
    .banner-slider-content h1 { font-size: 34px; }
    .banner-slider-area .banner-slider-content h2 { font-size: 34px; }
    .banner-slider-img { padding-top: 56px; padding-bottom: 20px; }
    /* responsive.css sadza strzalki na bottom:85px - u nas wpadaly na przycisk CTA */
    .banner-slider-area .owl-nav .owl-prev,
    .banner-slider-area .owl-nav .owl-next {
        bottom: 15px;
    }
}

/* Menu mobilne. meanmenu.css ma wlasne kolory Hilo (#ff6364 pasek, #ff2d55 active),
   ktore nie podlegaly podmianie palety w style.css. */
@media (max-width: 991px) {
    .mean-container .mean-bar {
        background-color: #fff;
        box-shadow: 0 2px 14px rgba(27, 39, 71, .08);
    }

    .mean-container a.meanmenu-reveal { color: var(--granat); }
    .mean-container a.meanmenu-reveal span { background: var(--granat); }

    .mean-container .mean-nav ul li a { color: var(--granat); }
    .mobile-nav.mean-container .mean-nav ul li a.active { color: var(--czerwony); }

    .hero-lubrisyn { padding: 80px 0; }
    .hero-lubrisyn h1 { font-size: 44px; }
    .hero-lubrisyn h2 { font-size: 25px; }
}

@media (max-width: 767px) {
    .hero-lubrisyn { padding: 60px 0; }
    .hero-lubrisyn h1 { font-size: 34px; }
    .hero-lubrisyn h2 { font-size: 20px; }
    .hero-lubrisyn p { font-size: 15px; }
}

@media (max-width: 400px) {
    .hero-lubrisyn h1 { font-size: 28px; }
    .hero-lubrisyn h2 { font-size: 18px; }
}

/* Kafle wyboru odbiorcy */
.kafel-odbiorcy {
    display: block;
    background: var(--szare-tlo);
    border: 1px solid var(--szara-ramka);
    border-radius: 8px;
    padding: 46px 30px;
    text-align: center;
    transition: .3s;
    height: 100%;
}

.kafel-odbiorcy:hover {
    border-color: var(--granat);
    box-shadow: 0 10px 30px rgba(27, 39, 71, .12);
}

.kafel-odbiorcy h3 { color: var(--granat); margin-bottom: 8px; }
.kafel-odbiorcy p { color: #666; margin: 0; }

/* Akordeon "Kluczowe informacje" */
.akordeon-lubrisyn .accordion-button {
    font-weight: 600;
    color: var(--granat);
}

.akordeon-lubrisyn .accordion-button:not(.collapsed) {
    background: var(--szare-tlo);
    color: var(--granat);
    box-shadow: none;
}

.akordeon-lubrisyn .accordion-button:focus {
    border-color: var(--szara-ramka);
    box-shadow: none;
}

/* Karta produktu */
.produkt-zdjecie {
    background: var(--szare-tlo);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
}

.produkt-zdjecie img { max-width: 100%; height: auto; }

.produkt-tresc h1 { color: var(--granat); font-size: 34px; }

.produkt-tresc .pojemnosc {
    color: #666;
    font-size: 17px;
    margin-bottom: 22px;
}

/* Wspolne: naglowki sekcji, linki */
.section-title h2 { color: var(--granat); }

/* style.css daje akapitowi max-width:700px bez auto-marginesow -
   w wysrodkowanej sekcji blok wisial przy lewej krawedzi */
.section-title.text-center p {
    margin-left: auto;
    margin-right: auto;
}

a { color: var(--niebieski); }
a:hover { color: var(--niebieski-hover); }

.default-btn {
    background-color: var(--czerwony);
    color: #fff;
}

.default-btn:hover { background-color: var(--czerwony-ciemny); color: #fff; }

/* Baner podstrony bez obrazu demo */
.baner-podstrony {
    background: var(--granat);
    padding: 60px 0;
    color: #fff;
    position: relative;
    overflow: hidden;
}

/* Znak wodny: logo uciete prawa krawedzia, ledwo widoczne */
.baner-podstrony::after {
    content: "";
    position: absolute;
    top: 50%;
    right: -170px;
    width: 720px;
    height: 148px;
    transform: translateY(-50%);
    background: url("../img/logo-lubrisyn-ha-white.svg") no-repeat center / contain;
    opacity: .06;
    pointer-events: none;
}

.baner-podstrony .container { position: relative; z-index: 1; }

.baner-podstrony h2 { color: #fff; margin-bottom: 8px; }
.baner-podstrony ul { margin: 0; padding: 0; list-style: none; }
.baner-podstrony ul li { display: inline-block; color: rgba(255,255,255,.7); }
.baner-podstrony ul li + li::before { content: "/"; margin: 0 8px; }
.baner-podstrony ul li a { color: #fff; }

/* Pasek CTA (zamiast pustej sekcji opinii) */
.pasek-cta {
    background: var(--granat);
    padding: 56px 0;
}

.pasek-cta h2 {
    color: #fff;
    font-size: 26px;
    margin: 0;
}

@media (max-width: 991px) {
    .pasek-cta h2 { margin-bottom: 22px; }
}

/* Lista cech na karcie produktu */
.cechy-produktu {
    list-style: none;
    padding: 0;
    margin: 18px 0 0;
}

.cechy-produktu li {
    margin-bottom: 8px;
    color: #444;
}

.cechy-produktu li i {
    color: var(--czerwony);
    font-size: 20px;
    vertical-align: -3px;
    margin-right: 8px;
}

/* Stopka */
.stopka-lubrisyn {
    background: var(--granat);
    color: rgba(255,255,255,.8);
    padding: 70px 0 0;
}

.stopka-lubrisyn h3 { color: #fff; font-size: 20px; margin-bottom: 22px; }
.stopka-lubrisyn a { color: rgba(255,255,255,.8); }
.stopka-lubrisyn a:hover { color: var(--zloto); }
.stopka-lubrisyn ul { list-style: none; padding: 0; }
.stopka-lubrisyn ul li { margin-bottom: 10px; }

.stopka-dol {
    border-top: 1px solid rgba(255,255,255,.15);
    margin-top: 40px;
    padding: 22px 0;
    font-size: 14px;
}

/* Tresc artykulu i dokumentow prawnych */
.tresc-dokumentu h3 {
    color: var(--granat);
    font-size: 22px;
    margin: 34px 0 14px;
}

.tresc-dokumentu h4 { color: var(--granat); font-size: 18px; margin: 22px 0 10px; }
.tresc-dokumentu table { width: 100%; margin: 18px 0; border-collapse: collapse; }
.tresc-dokumentu th,
.tresc-dokumentu td { border: 1px solid var(--szara-ramka); padding: 10px 12px; vertical-align: top; }
.tresc-dokumentu th { background: var(--szare-tlo); color: var(--granat); text-align: left; }

/* Kontakt */
.kontakt-karta {
    background: var(--szare-tlo);
    border-radius: 8px;
    padding: 34px 30px;
    height: 100%;
}

.kontakt-karta i { color: var(--czerwony); font-size: 28px; }
.kontakt-karta h3 { color: var(--granat); font-size: 19px; margin: 14px 0 10px; }
.kontakt-karta a { color: var(--granat); font-weight: 500; }
.kontakt-karta a:hover { color: var(--czerwony); }

/* Karty artykulow */
.karta-artykulu {
    border: 1px solid var(--szara-ramka);
    border-radius: 8px;
    overflow: hidden;
    height: 100%;
}

.karta-artykulu .karta-tresc { padding: 26px 24px; }
.karta-artykulu h3 { font-size: 20px; }
.karta-artykulu h3 a { color: var(--granat); }
.karta-artykulu h3 a:hover { color: var(--czerwony); }

/* Obrazy kart i artykulow (ETAP 7) */
.karta-artykulu > img {
    display: block;
    width: 100%;
    height: auto;
}

.kafel-odbiorcy img {
    display: block;
    max-height: 240px;
    width: auto;
    margin: 0 auto 18px;
}

.obraz-artykulu { margin-bottom: 28px; }
.obraz-artykulu img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
}