:root {
            /* Główny kolor czerwony wzięty z oryginalnej strony */
            --moto-red: #d32e29; 
        }
        
        body {
            font-family: Arial, sans-serif;
            color: #333;
        }

        .text-red {
            color: var(--moto-red) !important;
        }

        .bg-red {
            background-color: var(--moto-red) !important;
            color: #fff;
        }

        /* Stylizacja nowego menu */
        .uk-navbar-nav > li > a {
            color: var(--moto-red);
            font-weight: bold;
            font-size: 14px;
            text-transform: none; /* Żeby nie było samych dużych liter jeśli nie chcesz */
        }
        
        .uk-navbar-nav > li > a:hover {
            color: #000; /* Kolor menu po najechaniu myszką */
        }

        .contact-info-top span {
            color: var(--moto-red);
            margin-right: 5px;
        }
        
        /* --- STYL DLA PRZYKLEJONEGO NAGŁÓWKA (PEŁNA SZEROKOŚĆ) --- */
        .sticky-nav-wrapper {
            background-color: #ffffff; /* Białe tło na pełną szerokość ekranu */
            z-index: 980;
        }

        .uk-navbar-sticky {
            box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Cień pod całą belką po przescrollowaniu */
        }    

        /* --- CZERWONA LINIA POD MENU --- */
        .menu-divider {
            border: 0;
            border-top: 3px solid var(--moto-red);
            
            margin: 6px 0 0 0 !important; /* 6px ODSTĘPU OD GÓRY (od logo i menu) */
            padding: 0;
            
            opacity: 1;
            visibility: visible;
            transition: opacity 0.2s ease, visibility 0.2s ease; 
        }

        /* Po przescrollowaniu w dół (gdy menu jest sticky) -> UKRYJ LINIĘ I USUŃ MARGINES */
        .uk-navbar-sticky .menu-divider {
            opacity: 0 !important;
            visibility: hidden !important;
            margin-top: 0 !important; /* Kasujemy margines gdy linia znika */
        }


        /* Wymuszenie proporcji dla obrazków marek z lewej strony */
        .brand-logo-grid img {
            width: 66px;
            height: 48px;
            object-fit: contain;
        }

        /* Usunięcie domyślnych stylów linków dla 4 ikon */
        .icon-link {
            text-decoration: none;
            color: #000;
            display: block;
            transition: transform 0.2s;
        }
        .icon-link:hover {
            transform: scale(1.05);
            text-decoration: none;
            color: var(--moto-red);
        }

        /* --- EFEKT PRZESUWANIA DLA 4 IKON (SPRITE) --- */
        .icon-col {
            display: flex !important;
            justify-content: center !important;
            align-items: center !important;
        }

        .icon-sprite-wrapper {
            display: block !important;
            overflow: hidden !important;
            position: relative !important;
            
            width: 100px !important;  /* Dokładna szerokość obrazka */
            height: 143px !important; /* Połowa z 286px */
            
            margin: 0 auto !important;
            flex: none !important;
        }

        .icon-sprite-wrapper img {
            display: block !important;
            width: 100px !important;
            height: 286px !important;
            max-width: none !important; /* Zabezpieczenie przed skalowaniem UIkit */
            transition: transform 0.3s ease-in-out !important; 
            transform: translateY(0) !important;
        }

        /* Po najechaniu myszką przesuwamy obrazek o 50% w górę */
        .icon-sprite-wrapper:hover img {
            transform: translateY(-50%)!important;
        }

        /* GALERIA */
        /* --- STYL DLA MINIATUREK W GALERII --- */
        .gallery-card {
            background: #fff;
            padding: 4px;
            border: 1px solid #ddd;
            box-shadow: 0 1px 3px rgba(0,0,0,0.15);
            transition: transform 0.2s ease, box-shadow 0.2s ease;
            display: block;
        }
        .gallery-card:hover {
            transform: scale(1.03);
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }
        .gallery-card img {
            width: 100%;
            height: auto;
            display: block;
        }

        /* --- STYL DLA KAFELKÓW DOBIERZ OLEJ --- */
        .oil-card {
            display: block;
            background: #fff;
            padding: 5px;
            border: 1px solid #e5e5e5;
            box-shadow: 0 2px 6px rgba(0,0,0,0.08);
            border-radius: 4px;
            transition: transform 0.2s ease, box-shadow 0.2s ease;
        }
        .oil-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 6px 15px rgba(0,0,0,0.15);
        }
        .oil-card img {
            width: 100%;
            height: auto;
            display: block;
        }