:root {
    --brand-yellow: #FFFFFF; /* zmiana na biały */
    --brand-dark: #1e1e1e;
    --brand-red: #a6484b; /* nowy kolor */
}

/* Kolorystyka */
.bg-brand-yellow {
    background-color: var(--brand-yellow) !important;
}

.text-brand-yellow {
    color: var(--brand-yellow) !important;
}

.text-brand-red {
    color: var(--brand-red) !important; /* Nowa klasa koloru tekstu */
}

/* Stylizowany nagłówek na slajderze */
.hero-overlay-title {
    background: #333333c7;
    display: inline-block;
    padding: 15px 30px;
    border-radius: 4px;
    /* Upewniamy się, że cały tekst wewnątrz będzie na 100% biały */
    color: #ffffff !important; 
}
.hero-overlay-title h2, 
.hero-overlay-title h3 {
    color: #ffffff !important;
}


/* Stylizowane żółte tło pod zdjęciami (efekt ze zdjęcia) */
.img-frame-yellow {
    position: relative;
}
.img-frame-yellow::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    width: 100%;
    height: 100%;
    background-color: var(--brand-yellow);
    z-index: 0;
    border-radius: 8px;
}
.img-frame-yellow img {
    position: relative;
    z-index: 1;
}

.bg-light-blue {
    background-color: #eaf4fd !important;
}

/* Pełny, mocno widoczny przycisk (Solid Red) */
.btn-solid-red {
    background-color: var(--brand-red) !important;
    color: #ffffff !important;
    border: none !important;
    text-transform: none !important;
    font-size: 1.2rem !important;
    padding: 0 40px !important;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
}
.btn-solid-red:hover {
    background-color: #853a3c !important; /* Nieco ciemniejszy bordowy po najechaniu */
    color: #ffffff !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Tło dla całej strony */
body {
    background-color: #efefef !important;
}

/* Tabela na szarym tle: jaśniejsze wiersze (nieparzyste) na czystą biel */
.uk-table-striped > tr:nth-of-type(odd), 
.uk-table-striped tbody tr:nth-of-type(odd) {
    background-color: #ffffff !important;
}

/* Tabela na szarym tle: ciemniejsze wiersze (parzyste) na docelowy jasnoniebieski */
.uk-table-striped > tr:nth-of-type(even), 
.uk-table-striped tbody tr:nth-of-type(even) {
    background-color: #eaf4fd !important;
}

/* Opcjonalnie: lekkie białe tło pod główną sekcją produktu, żeby odciąć ją od szarego body */
.product-container {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

/* Pozioma linia w kafelkach produktów */
.product-card-divider {
    border-top: 2px solid var(--brand-red) !important;
    transition: border-color 0.3s ease-in-out;
}

/* Zmiana koloru linii po najechaniu myszką na kafelek */
.uk-card:hover .product-card-divider {
    border-top-color: #f0f0f0 !important;
}

/* ==========================================
   POPRAWKA MOBILNEGO MENU (Białe tło + ciemny tekst)
   ========================================== */
#mobile-menu .uk-offcanvas-bar {
    background-color: #ffffff !important;
    color: #222222 !important;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15) !important; /* Ładny cień odcinający menu */
}

/* Kolor wszystkich linków w menu mobilnym i przycisku zamknięcia (X) */
#mobile-menu .uk-nav a,
#mobile-menu .uk-offcanvas-close {
    color: #222222 !important;
}

/* Kolor strzałek rozwijania akordeonu (OFERTA) */
#mobile-menu .uk-nav-parent-icon {
    color: #555555 !important;
}

/* Kolor po najechaniu i aktywna podstrona (nasza firmowa czerwień) */
#mobile-menu .uk-nav a:hover,
#mobile-menu .uk-nav li.uk-active > a {
    color: var(--brand-red) !important;
    font-weight: bold;
}

/* Pozioma linia rozdzielająca w menu mobilnym */
#mobile-menu .uk-nav-divider {
    border-top: 1px solid #e0e0e0 !important;
}