/* ============================================
   ZMIENNE CSS - DESIGN TOKENS
   ============================================ */
:root {
    /* Kolory brandingowe */
    --color-primary: #B11F27;
    --color-primary-hover: #C92A32;
    --color-primary-dark: #99000F;
    --color-primary-visited: #8B1920;
    
    /* Kolory tekstowe */
    --color-text-dark: #373737;
    --color-text-medium: #575756;
    --color-text-light: #575757;
    --color-black: #000000;
    --color-white: #fff;
    
    /* Kolory tła */
    --color-bg-footer: #dedede;
    --color-bg-disabled: #f9f9f9;
    --color-border: #dedede;
    
    /* Spacing system (8px base) */
    --spacing-xs: 5px;
    --spacing-sm: 10px;
    --spacing-md: 15px;
    --spacing-lg: 20px;
    
    /* Typography */
    --font-family-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    
    /* Transitions */
    --transition-standard: all 0.30s ease-in-out;
    --transition-fast: all 0.15s ease-in-out;
    
    /* Shadows */
    --shadow-hover: 0 0 12px 0 rgba(0, 0, 0, 0.1);
    --shadow-button: 0 4px 8px rgba(177, 31, 39, 0.2);
    
    /* Border radius */
    --radius-sm: 5px;
    --radius-xs: 3px;
    --radius-button: 2px;
}

/* ============================================
   PRZYCISKI
   ============================================ */
.btn-primary {
    color: var(--color-white);
    background-color: var(--color-primary);
    border-color: var(--color-primary-dark);
    transition: var(--transition-standard);
    cursor: pointer;
    font-weight: 500;
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-button);
}

.btn-primary:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    box-shadow: 0 0 0 3px rgba(177, 31, 39, 0.1);
}

.btn-primary:active {
    background-color: var(--color-primary-dark);
    transform: translateY(0);
}

.btn-primary:disabled,
.btn-primary[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-link {
    color: var(--color-primary);
    text-decoration: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: var(--transition-standard);
}

.btn-link:hover {
    text-decoration: underline;
    color: var(--color-primary-hover);
}

.btn-link:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

label.btn-link:not(:hover) {
    color: var(--color-text-dark);
}

/* ============================================
   LINKI
   ============================================ */
a {
    color: var(--color-primary);
    transition: var(--transition-standard);

    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

a:hover {
    color: var(--color-primary-hover);
    text-decoration-thickness: 2px;
}

a:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: var(--radius-button);
}

a:visited {
    color: var(--color-primary-visited);
}

/* ============================================
   STOPKA
   ============================================ */
footer {
    background-color: var(--color-bg-footer);
    color: var(--color-white);
}

/* ============================================
   PANELE
   ============================================ */
.abs-panel > .panel-heading {
    color: var(--color-text-medium);
}

.abs-panel-main > .panel-heading {
    color: var(--color-primary);
    font-weight: 600;
}

.label-info {
    background-color: var(--color-text-light);
    padding: 0.25em 0.6em;
    border-radius: var(--radius-xs);
    font-size: 85%;
}

.abs-simple-panel-header .abs-simple-panel-icon {
    color: var(--color-primary);
    transition: var(--transition-standard);
}

.abs-simple-panel-header .abs-simple-panel-icon:hover {
    transform: scale(1.1);
}

/* ============================================
   PAGINACJA
   ============================================ */
.pager {
    padding-left: 0;
    margin: var(--spacing-lg) 0;
    text-align: center;
    list-style: none;
    display: flex;
    justify-content: center;
    gap: var(--spacing-xs);
    flex-wrap: wrap;
}

.pager li > a,
.pager li > span {
    color: var(--color-primary);
    display: inline-block;
    padding: 8px 12px;
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    transition: var(--transition-standard);
    text-decoration: none;
    min-width: 40px;
    text-align: center;
}

.pager li > a:hover {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

.pager li > a:focus {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.pager .disabled > a,
.pager .disabled > span {
    color: #999;
    cursor: not-allowed;
    background-color: var(--color-bg-disabled);
}

.pager .active > a,
.pager .active > span {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-primary);
}

/* ============================================
   KATEGORIE
   ============================================ */
.Kategorie {
    text-align: center;
    padding-bottom: var(--spacing-sm);
    font-family: var(--font-family-primary);
}

.Kategorie .PodkategorieWylaczone {
    display: block !important;
}

.Kategorie .KategorieLista strong {
    display: block;
    padding-bottom: var(--spacing-md);
    font-size: 140%;
    text-transform: uppercase;
    font-weight: normal;
}

.Kategorie .KategorieLista ul {
    list-style-type: none;
    padding: 0;
    margin: 0 calc(var(--spacing-sm) * -1) var(--spacing-sm) calc(var(--spacing-sm) * -1);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-sm);
}

.Kategorie .KategorieLista ul li {
    text-align: center;
    position: relative;
    background-clip: content-box;
    box-sizing: border-box;
    max-width: 250px;
    flex: 0 1 auto;
}

.Kategorie .KategorieLista ul li a {
    display: block;
    padding: var(--spacing-md);
    text-decoration: none;
    transition: var(--transition-standard);
}

.Kategorie .KategorieLista ul li h2 {
    border-radius: var(--radius-sm);
    margin: var(--spacing-sm);
    background: var(--color-white);
    border: 1px solid var(--color-border);
    transition: var(--transition-standard);
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    font-weight: bold;
}

.Kategorie .KategorieLista ul li h2:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
}

.Kategorie .KategorieLista ul.KategoriaBezZdjecia li a {
    font-size: 87%;
    color: var(--color-text-dark);
}

.Kategorie .KategorieLista ul.KategoriaZdjecie li a {
    font-size: 80%;
    color: var(--color-black);
    font-weight: normal;
}

.Kategorie .KategorieLista ul.KategoriaZdjecie li p {
    font-size: 90%;
    padding: 0 var(--spacing-sm) var(--spacing-sm) var(--spacing-sm);
    font-weight: normal;
    margin: 0;
}

.Kategorie .KategorieLista ul.KategoriaZdjecie img {
    padding-bottom: var(--spacing-sm);
    max-width: 100%;
    height: auto;
    will-change: transform;
}

.Kategorie .KategorieLista a em {
    display: inline-block;
    margin-left: var(--spacing-xs);
    font-weight: normal;
    font-style: normal;
}

/* ============================================
   SYSTEM KOLUMN RESPONSYWNYCH
   ============================================ */
.OknaRwd {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: stretch;
    margin: 0 calc(var(--spacing-sm) * -1);
    gap: var(--spacing-sm);
}

.OknoRwd {
    flex-grow: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* Mobile first - 1 kolumna */
.Kol-3 .OknoRwd,
.Kol-4 .OknoRwd,
.Kol-5 .OknoRwd {
    width: 100%;
    padding: 0 var(--spacing-sm);
}

/* Tablet - 2 kolumny */
@media (min-width: 768px) {
    .Kol-3 .OknoRwd,
    .Kol-4 .OknoRwd,
    .Kol-5 .OknoRwd {
        width: calc(50% - var(--spacing-sm));
    }
}

/* Desktop - 3+ kolumny */
@media (min-width: 1024px) {
    .Kol-3 .OknoRwd {
        width: calc(33.333333% - var(--spacing-sm));
    }
    
    .Kol-4 .OknoRwd {
        width: calc(25% - var(--spacing-sm));
    }
    
    .Kol-5 .OknoRwd {
        width: calc(20% - var(--spacing-sm));
    }
}

/* Large desktop */
@media (min-width: 1440px) {
    .Kol-5 .OknoRwd {
        width: calc(16.666667% - var(--spacing-sm));
    }
}

/* ============================================
   DOSTĘPNOŚĆ
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Skip to main content link dla czytników ekranu */
.skip-to-main {
    position: absolute;
    left: -9999px;
    z-index: 999;
}

.skip-to-main:focus {
    left: 50%;
    transform: translateX(-50%);
    top: var(--spacing-sm);
    background: var(--color-primary);
    color: var(--color-white);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--radius-sm);
}
.abs-header-content-buttons ul.nav-pills>li.lmin-indicator .indicator, .abs-header-mobile-menu ul.nav-pills>li.lmin-indicator .indicator, .user-panel ul.nav-pills>li.lmin-indicator .indicator, #topAppHeader ul.nav-pills>li.lmin-indicator .indicator {
    color: #777;
    border: 1px solid #777;


}
#topAppHeader ul.nav-pills>li.lmin-indicator .indicator, .abs-header-content-buttons ul.nav-pills>li.lmin-indicator .indicator .progress-text {
    color: #777;

}
#topAppHeader ul.nav-pills>li.lmin-indicator .indicator .progress-text
 {
    color: #777;
}
#siteFloatingHeader.abs-floatingheader-mode-pin .abs-header-content-buttons ul li.abs-btn-cart {
    background-color: #777;
}


.btn-primary {
    color: #fff;
    background-color: #777;
    border-color: #888
}



.btn-primary:active,.btn-primary.active,.open>.btn-primary.dropdown-toggle {
    color: #fff;
    background-color: #555;
    border-color: #666
}

.btn-primary:active:hover,.btn-primary:active:focus,.btn-primary:active.focus,.btn-primary.active:hover,.btn-primary.active:focus,.btn-primary.active.focus,.open>.btn-primary.dropdown-toggle:hover,.open>.btn-primary.dropdown-toggle:focus,.open>.btn-primary.dropdown-toggle.focus {
    color: #fff;
    background-color: #555;
    border-color: #666
}

.btn-primary:active,.btn-primary.active,.open>.btn-primary.dropdown-toggle {
    background-image: none
}

.btn-primary.disabled:hover,.btn-primary.other-truck:hover,.btn-primary.disabled:focus,.btn-primary.other-truck:focus,.btn-primary.disabled.focus,.btn-primary.focus.other-truck,.btn-primary[disabled]:hover,.btn-primary[disabled]:focus,.btn-primary[disabled].focus,fieldset[disabled] .btn-primary:hover,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary.focus {
    background-color: #777;
    border-color: #888
}

.btn-primary .badge {
    color: #777;
    background-color: #fff
}
.btn-success {
    background-color: #A72B2A;
    border-color: #971E1E;
}

.btn-success:focus,.btn-success.focus {
    background-color: #971E1E;
    border-color: #A72B2A
}

.btn-success:hover {
    background-color: #971E1E;
    border-color: #A72B2A
}

.btn-success:active,.btn-success.active,.open>.btn-success.dropdown-toggle {
    background-color: #971E1E;
    border-color: #A72B2A
}

.btn-success:active:hover,.btn-success:active:focus,.btn-success:active.focus,.btn-success.active:hover,.btn-success.active:focus,.btn-success.active.focus,.open>.btn-success.dropdown-toggle:hover,.open>.btn-success.dropdown-toggle:focus,.open>.btn-success.dropdown-toggle.focus {
    color: #fff;
    background-color: #398439;
    border-color: #255625
}

.btn-success:active,.btn-success.active,.open>.btn-success.dropdown-toggle {
    background-image: none
}

.btn-success.disabled:hover,.btn-success.other-truck:hover,.btn-success.disabled:focus,.btn-success.other-truck:focus,.btn-success.disabled.focus,.btn-success.focus.other-truck,.btn-success[disabled]:hover,.btn-success[disabled]:focus,.btn-success[disabled].focus,fieldset[disabled] .btn-success:hover,fieldset[disabled] .btn-success:focus,fieldset[disabled] .btn-success.focus {
    background-color: #5cb85c;
    border-color: #4cae4c
}

.btn-success .badge {
    color: #5cb85c;
    background-color: #fff
}

.btn-info {
    color: #fff;
    background-color: #5bc0de;
    border-color: #46b8da
}

.btn-info:focus,.btn-info.focus {
    color: #fff;
    background-color: #31b0d5;
    border-color: #1b6d85
}

.btn-info:hover {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc
}

.btn-info:active,.btn-info.active,.open>.btn-info.dropdown-toggle {
    color: #fff;
    background-color: #31b0d5;
    border-color: #269abc
}

.btn-info:active:hover,.btn-info:active:focus,.btn-info:active.focus,.btn-info.active:hover,.btn-info.active:focus,.btn-info.active.focus,.open>.btn-info.dropdown-toggle:hover,.open>.btn-info.dropdown-toggle:focus,.open>.btn-info.dropdown-toggle.focus {
    color: #fff;
    background-color: #269abc;
    border-color: #1b6d85
}

.btn-info:active,.btn-info.active,.open>.btn-info.dropdown-toggle {
    background-image: none
}

.btn-info.disabled:hover,.btn-info.other-truck:hover,.btn-info.disabled:focus,.btn-info.other-truck:focus,.btn-info.disabled.focus,.btn-info.focus.other-truck,.btn-info[disabled]:hover,.btn-info[disabled]:focus,.btn-info[disabled].focus,fieldset[disabled] .btn-info:hover,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info.focus {
    background-color: #5bc0de;
    border-color: #46b8da
}

.btn-info .badge {
    color: #5bc0de;

}

.product-header .abs-product-name {
    font-size: 24px;
    line-height: 1;
    color: var(--color-primary);
}
.product-header .product-subname {
    font-size: 1em;
    line-height: 1.5em;
    opacity: 1;
}
a.htmlAttributeValue {
    text-decoration: none;
}
.list-group-item.active,.list-group-item.active:hover,.list-group-item.active:focus {
    background-color: #777;
    border-color: #666
}
.Semper-ContactBtn:hover {
color: #fff;
}
.Kategorie .KategorieLista ul li {
    width: 200px;

}