/* =========================================================
   FRAGMENT: Dotychczasowy Custom CSS
   ========================================================= */
/* =========================================================
   GLOBALNY FONT SKLEPU
   ten sam co na stronie checkout
   ========================================================= */

:root {
    --site-font-family: "Figtree", sans-serif;
}

html body {
    font-family: var(--site-font-family) !important;
}

/* Elementy formularzy nie zawsze dziedziczą font z body */
button,
input,
select,
textarea {
    font-family: var(--site-font-family) !important;
}

/* =========================================================
  css mobile amazzing filter
   ========================================================= */
/* ============================================================
   AMAZZING FILTER MOBILE - SCHEIER v3
   ============================================================
   TYLKO FILTR MOBILNY / COMPACT
   Desktop pozostaje bez zmian.

   v3:
   - mniejsze marginesy boczne
   - poprawiony slider ceny
   - mniejsze uchwyty slidera
   - ciaśniejsza sekcja ceny
   - poprawiony napis "69 produktów"
   - brak nawiasu przed liczbą
   - subtelniejsze + / -
   - poprawione checkboxy
   - płynne rozwijanie sekcji
   - poprawiony dolny pasek
   ============================================================ */


/* ============================================================
   1. PANEL
   ============================================================ */

.has-compact-filter #amazzing_filter {
    width: 87% !important;
    max-width: 440px !important;

    background: #fff !important;

    border: 0 !important;
    box-shadow: none !important;
}


/* cień panelu */
.has-compact-filter.show-filter #amazzing_filter {
    box-shadow:
        -10px 0 30px
        rgba(0, 0, 0, .10) !important;
}


/* przyciemnienie strony */
.has-compact-filter .af-compact-overlay {
    transition:
        opacity .28s ease !important;
}

.has-compact-filter .af-compact-overlay.show {
    opacity: .42 !important;
}


/* ============================================================
   2. NAGŁÓWEK
   ============================================================ */

.has-compact-filter #amazzing_filter .title_block {
    position: relative;

    height: 76px;

    margin: 0 !important;

    padding:
        0
        68px
        0
        20px !important;

    display: flex;
    align-items: center;

    background: #fff !important;

    border: 0 !important;

    color: #111 !important;

    font-size: 0 !important;
    font-weight: 400 !important;

    line-height: 1 !important;

    text-transform: none !important;
    letter-spacing: 0 !important;
}


.has-compact-filter #amazzing_filter .title_block:before {
    content: 'Filtry';

    color: #111;

    font-size: 28px;
    font-weight: 400;

    line-height: 1;

    letter-spacing: -.4px;
    text-transform: none;
}


/* ============================================================
   3. X ZAMYKANIA
   ============================================================ */

.has-compact-filter #amazzing_filter .compact-close {
    position: absolute !important;

    top: 0 !important;
    right: 0 !important;
    bottom: auto !important;

    width: 68px !important;
    height: 76px !important;

    margin: 0 !important;
    padding: 0 !important;

    background: transparent !important;

    border: 0 !important;
    box-shadow: none !important;

    font-size: 0 !important;

    overflow: hidden;

    transition:
        transform .18s ease,
        opacity .18s ease !important;
}


.has-compact-filter #amazzing_filter .compact-close:before,
.has-compact-filter #amazzing_filter .compact-close:after {
    content: '' !important;

    position: absolute;

    top: 50%;
    left: 50%;

    width: 27px !important;
    height: 1.5px !important;

    margin: 0 !important;

    background: #777 !important;

    border: 0 !important;

    transform-origin: center;

    transition:
        background-color .2s ease !important;
}


.has-compact-filter #amazzing_filter .compact-close:before {
    transform:
        translate(-50%, -50%)
        rotate(45deg) !important;
}

.has-compact-filter #amazzing_filter .compact-close:after {
    transform:
        translate(-50%, -50%)
        rotate(-45deg) !important;
}


.has-compact-filter #amazzing_filter .compact-close:active {
    transform: scale(.92);
}


/* ============================================================
   4. ZAWARTOŚĆ PANELU
   ============================================================ */

.has-compact-filter .af.block .block_content {
    padding:
        0
        16px
        108px
        20px !important;

    max-height:
        calc(100% - 76px) !important;

    background: #fff !important;

    overflow-x: hidden !important;

    overscroll-behavior: contain;
}


.has-compact-filter #amazzing_filter .af-form {
    margin: 0 !important;
    padding: 0 !important;
}


/* ============================================================
   5. GRUPY FILTRÓW
   ============================================================ */

.has-compact-filter #amazzing_filter .af_filter {
    position: relative;

    margin: 0 !important;
    padding: 0 !important;

    background: #fff !important;

    border: 0 !important;

    border-bottom:
        1px dashed
        #dddddd !important;
}


/* ============================================================
   6. TYTUŁY FILTRÓW
   ============================================================ */

.has-compact-filter #amazzing_filter .af_subtitle {
    position: relative;

    min-height: 62px;

    margin: 0 !important;

    padding:
        18px
        35px
        17px
        0 !important;

    display: flex;
    align-items: center;

    background: #fff !important;

    color: #626262 !important;

    font-size: 16px !important;
    font-weight: 400 !important;

    line-height: 1.3 !important;

    letter-spacing: 0 !important;

    text-transform: none !important;

    cursor: pointer;

    transition:
        color .2s ease !important;
}


.has-compact-filter #amazzing_filter
.af_filter:not(.closed) .af_subtitle {
    color: #4a4a4a !important;
}


.has-compact-filter #amazzing_filter
.af_subtitle:active {
    color: #111 !important;
}


/* ============================================================
   7. PLUS / MINUS - ANIMOWANE
   ============================================================ */


/* pozioma kreska */
.has-compact-filter #amazzing_filter
.af_subtitle.toggle-content:before {
    content: '' !important;

    position: absolute !important;

    top: 50% !important;
    right: 4px !important;

    width: 15px !important;
    height: 1.5px !important;

    margin: 0 !important;

    background: #929292 !important;

    border: 0 !important;

    transform:
        translateY(-50%) !important;

    transition:
        transform .27s cubic-bezier(.4, 0, .2, 1),
        background-color .2s ease !important;
}


/* pionowa kreska plusa */
.has-compact-filter #amazzing_filter
.af_subtitle.toggle-content:after {
    content: '' !important;

    position: absolute;

    top: 50%;
    right: 10.75px;

    width: 1.5px;
    height: 15px;

    background: #929292;

    transform:
        translate(50%, -50%)
        scaleY(1);

    transform-origin: center;

    opacity: 1;

    transition:
        transform .27s cubic-bezier(.4, 0, .2, 1),
        opacity .20s ease;
}


/* po otwarciu pionowa kreska znika */
.has-compact-filter #amazzing_filter
.af_filter:not(.closed)
.af_subtitle.toggle-content:after {
    transform:
        translate(50%, -50%)
        scaleY(0);

    opacity: 0;
}


/* minus minimalnie krótszy */
.has-compact-filter #amazzing_filter
.af_filter:not(.closed)
.af_subtitle.toggle-content:before {
    transform:
        translateY(-50%)
        scaleX(.82) !important;

    background: #777 !important;
}


/* ============================================================
   8. ANIMACJA ROZWIJANIA
   ============================================================ */

.has-compact-filter #amazzing_filter
.af_filter .af_filter_content {
    display: block !important;

    max-height: 1000px;

    opacity: 1;
    visibility: visible;

    overflow: hidden;

    padding:
        0
        0
        14px
        0 !important;

    transform: translateY(0);

    transition:
        max-height .36s cubic-bezier(.4, 0, .2, 1),
        opacity .23s ease,
        transform .30s cubic-bezier(.4, 0, .2, 1),
        padding .30s ease,
        visibility 0s linear 0s !important;

    will-change:
        max-height,
        opacity,
        transform;
}


.has-compact-filter #amazzing_filter
.af_filter.closed .af_filter_content {
    display: block !important;

    max-height: 0 !important;

    opacity: 0;

    visibility: hidden;

    padding-top: 0 !important;
    padding-bottom: 0 !important;

    transform: translateY(-5px);

    pointer-events: none;

    transition:
        max-height .32s cubic-bezier(.4, 0, .2, 1),
        opacity .17s ease,
        transform .24s ease,
        padding .28s ease,
        visibility 0s linear .32s !important;
}


/* filtry specjalne */
.has-compact-filter #amazzing_filter
.af_filter.special .af_filter_content {
    display: block !important;

    max-height: 1000px !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
}


/* ============================================================
   9. OPCJE FILTRÓW
   ============================================================ */

.has-compact-filter #amazzing_filter
.af_filter ul {
    margin: 0 !important;
    padding: 0 !important;

    max-height: none !important;
}


.has-compact-filter #amazzing_filter
.af_filter li {
    margin: 0 !important;
    padding: 0 !important;

    overflow: visible !important;
}


.has-compact-filter #amazzing_filter
.af_filter label {
    position: relative;

    min-height: 40px;

    margin: 0 !important;

    padding:
        7px
        0 !important;

    display: flex !important;
    align-items: center !important;

    color: #666 !important;

    font-size: 15px !important;
    font-weight: 400 !important;

    line-height: 1.35 !important;

    cursor: pointer;

    transition:
        color .18s ease,
        transform .18s ease;
}


.has-compact-filter #amazzing_filter
.af_filter label:active {
    transform: translateX(1px);

    color: #222 !important;
}


.has-compact-filter #amazzing_filter
.af_filter .name {
    padding-left: 9px !important;
}


/* ============================================================
   10. CHECKBOXY
   ============================================================ */

.has-compact-filter #amazzing_filter
input.af.checkbox,

.has-compact-filter #amazzing_filter
input.af.radio {
    -webkit-appearance: none !important;
    appearance: none !important;

    flex:
        0
        0
        19px;

    width: 19px !important;
    height: 19px !important;

    min-width: 19px;

    margin: 0 !important;
    padding: 0 !important;

    background: #fff !important;

    border:
        1px solid
        #d0d0d0 !important;

    box-shadow: none !important;

    outline: none !important;

    vertical-align: middle;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        transform .15s ease !important;
}


.has-compact-filter #amazzing_filter
input.af.checkbox {
    border-radius: 2px !important;
}


.has-compact-filter #amazzing_filter
input.af.radio {
    border-radius: 50% !important;
}


.has-compact-filter #amazzing_filter
input.af.checkbox:active,

.has-compact-filter #amazzing_filter
input.af.radio:active {
    transform: scale(.9);
}


.has-compact-filter #amazzing_filter
input.af.checkbox:checked {
    background-color: #111 !important;

    border-color: #111 !important;

    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3 8.2 6.2 11.2 13 4.5'/%3E%3C/svg%3E") !important;

    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 13px 13px !important;
}


.has-compact-filter #amazzing_filter
input.af.radio:checked {
    border: 5px solid #111 !important;

    background: #fff !important;
}


/* ============================================================
   11. LICZNIKI OPCJI
   ============================================================ */

.has-compact-filter #amazzing_filter
.af_filter .count {
    min-width: 21px;

    margin-left: auto !important;

    padding:
        2px
        4px !important;

    background: #f3f3f3 !important;

    color: #444 !important;

    font-size: 10.5px !important;
    font-weight: 600 !important;

    line-height: 1.25 !important;

    text-align: center;

    border-radius: 1px;
}


.has-compact-filter #amazzing_filter
.af_filter .count:before,

.has-compact-filter #amazzing_filter
.af_filter .count:after {
    content: none !important;

    display: none !important;
}


/* ============================================================
   12. CENA
   ============================================================ */

.has-compact-filter #amazzing_filter
.af-slider {
    display: flex !important;

    flex-direction: column;

    margin:
        0
        0
        0
        0 !important;

    padding:
        0
        4px
        13px
        4px !important;
}


/* ============================================================
   13. POLA CENY
   ============================================================ */

.has-compact-filter #amazzing_filter
.af-slider .slider-values {
    position: relative;

    order: 1;

    display: flex !important;
    align-items: center;

    justify-content: space-between;

    gap: 60px;

    margin:
        0
        0
        19px
        0 !important;

    padding: 0 !important;
}


/* DO */
.has-compact-filter #amazzing_filter
.af-slider .slider-values:after {
    content: 'do';

    position: absolute;

    top: 50%;
    left: 50%;

    transform:
        translate(-50%, -50%);

    color: #777;

    font-size: 14px;
    font-weight: 400;

    line-height: 1;

    pointer-events: none;
}


/* pola OD / DO */
.has-compact-filter #amazzing_filter
.af-slider .slider_value,

.has-compact-filter #amazzing_filter
.af-slider .slider_value.to_display {
    position: relative;

    float: none !important;

    flex: 1 1 0;

    width: auto !important;

    min-width: 0;
    min-height: 50px;

    margin: 0 !important;

    padding:
        11px
        13px !important;

    display: flex !important;
    align-items: center;

    background: #fff !important;

    border:
        1px solid
        #d7d7d7 !important;

    border-radius: 4px !important;

    color: #666 !important;

    font-size: 15px !important;

    line-height: 1.2 !important;

    box-shadow:
        0
        1px
        0
        rgba(0, 0, 0, .08) !important;

    transition:
        border-color .18s ease,
        box-shadow .18s ease !important;
}


.has-compact-filter #amazzing_filter
.af-slider .slider_value:active {
    border-color: #aaa !important;
}


.has-compact-filter #amazzing_filter
.af-slider .slider_value .prefix {
    font-size: 12px;
}


.has-compact-filter #amazzing_filter
.af-slider .slider_value .value {
    color: #666 !important;

    font-size: 15px !important;
}


.has-compact-filter #amazzing_filter
.af-slider .slider_value .suffix {
    margin-left: auto !important;

    padding-left: 6px !important;

    color: #111 !important;

    font-size: 12px !important;
    font-weight: 600 !important;
}


/* input po kliknięciu ceny */
.has-compact-filter #amazzing_filter
.af-slider .slider_value .input-text {
    border: 0 !important;

    background: transparent !important;

    box-shadow: none !important;

    outline: none !important;
}


/* ============================================================
   14. NOWY SUWAK CENY
   ============================================================ */

.has-compact-filter #amazzing_filter
.af-slider .slider-bar {
    order: 2;

    position: relative;

    height: 4px !important;

    margin:
        2px
        8px
        5px
        8px !important;

    background: #dedede !important;

    border: 0 !important;

    border-radius: 10px !important;

    box-shadow: none !important;
}


/* aktywny obszar */
.has-compact-filter #amazzing_filter
.af-slider .selected-bar {
    position: absolute;

    top: 0 !important;

    height: 4px !important;

    background: #888 !important;

    border-radius: 10px !important;
}


/*
   UCHWYTY

   Zamiast wielkich czarnych kwadratów:
   małe, okrągłe, schludne uchwyty.
*/
.has-compact-filter #amazzing_filter
.af-slider .pointer {
    top: 50% !important;

    width: 17px !important;
    height: 17px !important;

    margin:
        -8.5px
        0
        0
        -8.5px !important;

    background: #111 !important;

    border:
        3px solid
        #fff !important;

    border-radius: 50% !important;

    box-shadow:
        0
        0
        0
        1px
        #111 !important;

    cursor: pointer;

    transition:
        transform .15s ease,
        box-shadow .15s ease !important;
}


/* usuwamy stary pseudo-element modułu */
.has-compact-filter #amazzing_filter
.af-slider .pointer:before {
    display: none !important;
    content: none !important;
}


/* aktywny uchwyt */
.has-compact-filter #amazzing_filter
.af-slider .pointer.focused,

.has-compact-filter #amazzing_filter
.af-slider .pointer:active {
    transform: scale(1.13);

    box-shadow:
        0
        0
        0
        1px
        #111,
        0
        0
        0
        5px
        rgba(0, 0, 0, .06) !important;
}


/* niewidzialna powierzchnia kliknięcia slidera */
.has-compact-filter #amazzing_filter
.af-slider .clickable-dummy {
    top: -10px !important;

    height: 24px !important;

    cursor: pointer;
}


/* histogram */
.has-compact-filter #amazzing_filter
.af-slider .af-histogram {
    order: 2;
}


/* ============================================================
   15. AKTYWNE FILTRY
   ============================================================ */

.has-compact-filter #amazzing_filter
.selectedFilters.inline {
    margin:
        0
        0
        6px
        0 !important;

    padding:
        0
        0
        12px
        0 !important;

    display: flex;

    flex-wrap: wrap;

    gap: 6px;

    align-items: center;

    border-bottom:
        1px dashed
        #ddd;

    text-align: left;
}


.has-compact-filter #amazzing_filter
.selectedFilters.inline.hidden {
    display: none !important;
}


.has-compact-filter #amazzing_filter
.selectedFilters.inline .cf {
    float: none !important;

    display: inline-flex !important;
    align-items: center;

    min-height: 32px;

    margin: 0 !important;

    padding:
        6px
        9px !important;

    background: #f7f7f7 !important;

    border:
        1px solid
        #e1e1e1 !important;

    color: #555 !important;

    font-size: 11.5px;

    line-height: 1.2;

    transition:
        background-color .18s ease,
        transform .15s ease;
}


.has-compact-filter #amazzing_filter
.selectedFilters.inline .cf:active {
    transform: scale(.97);
}


.has-compact-filter #amazzing_filter
.selectedFilters.inline .cf a {
    margin-left: 7px !important;

    color: #888 !important;

    font-size: 14px !important;
}


.has-compact-filter #amazzing_filter
.selectedFilters.inline .clearAll {
    order: 99;

    float: none !important;

    display: inline-flex !important;
    align-items: center;

    min-height: 32px;

    margin: 0 !important;

    padding:
        6px
        9px !important;

    background: #fff !important;

    border:
        1px dashed
        #d1d1d1 !important;

    color: #777 !important;

    font-size: 10.5px !important;

    line-height: 1.2;
}


.has-compact-filter #amazzing_filter
.selectedFilters.inline .clearAll .txt {
    margin: 0 !important;

    font-size: 10.5px !important;
}


.has-compact-filter #amazzing_filter
.selectedFilters.inline .clearAll i {
    display: none !important;
}


/* ============================================================
   16. SELECTY / WYSZUKIWANIE
   ============================================================ */

.has-compact-filter #amazzing_filter
.af_filter select,

.has-compact-filter #amazzing_filter
.qsInput {
    width: 100%;

    min-height: 43px;

    margin-bottom: 6px;

    padding:
        9px
        11px !important;

    background: #fff !important;

    border:
        1px solid
        #d5d5d5 !important;

    border-radius: 3px !important;

    color: #555 !important;

    box-shadow: none !important;

    outline: none !important;
}


/* ============================================================
   17. DOLNY PASEK
   ============================================================ */

.has-compact-filter #amazzing_filter
.btn-holder {
    position: absolute !important;

    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;

    min-height: 86px;

    margin: 0 !important;

    padding:
        10px
        16px
        calc(10px + env(safe-area-inset-bottom))
        20px !important;

    display: block !important;

    background:
        rgba(255,255,255,.985) !important;

    border-top:
        1px solid
        #eeeeee !important;

    box-shadow:
        0
        -6px
        18px
        rgba(0,0,0,.025) !important;

    z-index: 10;
}


/* główny element */
.has-compact-filter #amazzing_filter
.btn-holder .viewFilteredProducts {
    position: relative;

    width: 100% !important;

    min-height: 62px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: block !important;

    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;

    color: transparent !important;

    font-size: 0 !important;

    text-transform: none !important;

    letter-spacing: 0 !important;

    overflow: visible;
}


/* ============================================================
   18. LICZBA PRODUKTÓW - POPRAWKA NAWIASU
   ============================================================ */

.has-compact-filter #amazzing_filter
.btn-holder .af-total-count {
    position: absolute;

    left: 0;
    top: 50%;

    transform:
        translateY(-50%);

    margin: 0 !important;
    padding: 0 !important;

    color: #666 !important;

    opacity: 1 !important;

    font-size: 15px !important;
    font-weight: 400 !important;

    line-height: 1 !important;

    white-space: nowrap;
}


/*
   Oryginalny Amazzing Filter dodaje:
   (69)

   Usuwamy OBA nawiasy.
*/
.has-compact-filter #amazzing_filter
.btn-holder .af-total-count:before {
    content: none !important;

    display: none !important;
}


.has-compact-filter #amazzing_filter
.btn-holder .af-total-count:after {
    content: ' produktów' !important;

    display: inline !important;

    color: #666 !important;

    font-size: 15px !important;
    font-weight: 400 !important;
}


/* ============================================================
   19. ZASTOSUJ
   ============================================================ */

.has-compact-filter #amazzing_filter
.btn-holder .viewFilteredProducts:before {
    content: 'Zastosuj';

    position: absolute;

    top: 4px;
    right: 0;

    width: 45%;

    height: 54px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: #fff;

    border:
        1px dashed
        #d0d0d0;

    border-radius: 3px;

    color: #111;

    font-size: 14px;

    font-weight: 700;

    line-height: 1;

    transition:
        background-color .18s ease,
        border-color .18s ease,
        transform .14s ease;
}


.has-compact-filter #amazzing_filter
.btn-holder .viewFilteredProducts:active:before {
    background: #f7f7f7;

    border-color: #aaa;

    transform: scale(.98);
}


/* loading */
.has-compact-filter #amazzing_filter
.viewFilteredProducts.loading {
    opacity: .65;
}


.has-compact-filter #amazzing_filter
.viewFilteredProducts.loading:before {
    content: 'Ładowanie...';

    pointer-events: none;
}


/* ============================================================
   20. NIEDOSTĘPNE
   ============================================================ */

.has-compact-filter #amazzing_filter
.no-available-items {
    opacity: .45;
}


.has-compact-filter #amazzing_filter
.no-available-items .af_subtitle,

.has-compact-filter #amazzing_filter
.no-available-items .af_filter_content {
    pointer-events: none;
}


/* ============================================================
   21. MAŁE TELEFONY
   ============================================================ */

@media (max-width: 390px) {

    .has-compact-filter #amazzing_filter {
        width: 91% !important;
    }


    .has-compact-filter #amazzing_filter
    .title_block {
        height: 70px;

        padding-left: 17px !important;
    }


    .has-compact-filter #amazzing_filter
    .title_block:before {
        font-size: 26px;
    }


    .has-compact-filter #amazzing_filter
    .compact-close {
        width: 62px !important;
        height: 70px !important;
    }


    .has-compact-filter .af.block
    .block_content {
        padding-left: 17px !important;
        padding-right: 13px !important;

        max-height:
            calc(100% - 70px) !important;
    }


    .has-compact-filter #amazzing_filter
    .af_subtitle {
        min-height: 59px;

        padding-top: 16px !important;
        padding-bottom: 15px !important;

        font-size: 15.5px !important;
    }


    .has-compact-filter #amazzing_filter
    .af-slider {
        padding-left: 2px !important;
        padding-right: 2px !important;
    }


    .has-compact-filter #amazzing_filter
    .af-slider .slider-values {
        gap: 50px;
    }


    .has-compact-filter #amazzing_filter
    .af-slider .slider_value,

    .has-compact-filter #amazzing_filter
    .af-slider .slider_value.to_display {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }


    .has-compact-filter #amazzing_filter
    .btn-holder {
        padding-left: 17px !important;
        padding-right: 13px !important;
    }


    .has-compact-filter #amazzing_filter
    .btn-holder .af-total-count,

    .has-compact-filter #amazzing_filter
    .btn-holder .af-total-count:after {
        font-size: 14px !important;
    }


    .has-compact-filter #amazzing_filter
    .btn-holder .viewFilteredProducts:before {
        width: 44%;

        font-size: 13.5px;
    }
}


/* ============================================================
   22. REDUKCJA ANIMACJI
   ============================================================ */

@media (prefers-reduced-motion: reduce) {

    .has-compact-filter #amazzing_filter *,
    .has-compact-filter #amazzing_filter *:before,
    .has-compact-filter #amazzing_filter *:after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ============================================================
   kod css formularza kontaktowego!!!!!!!!
   ============================================================ */

/* ============================================================
   SUPERKOMIN.PL — STRONA KONTAKTOWA
   Kompletny CSS pod nowy contactform.tpl
   ============================================================ */


/* ============================================================
   1. ZMIENNE
   ============================================================ */

body#contact {
  --sk-red: #e6382b;
  --sk-red-hover: #cf2f24;

  --sk-black: #111111;
  --sk-dark: #171717;

  --sk-text: #202020;
  --sk-muted: #727272;
  --sk-light-muted: #999999;

  --sk-border: #e5e5e5;
  --sk-border-hover: #c9c9c9;

  --sk-bg: #f7f7f7;
  --sk-white: #ffffff;

  --sk-radius: 14px;
}


/* ============================================================
   2. RESET LAYOUTU PRESTASHOP TYLKO NA KONTAKCIE
   ============================================================ */

body#contact .page-layout-2columns-left {
  width: 100%;
}

body#contact .cs-page-category__columns {
  display: block !important;
}

body#contact #left-column {
  display: none !important;
}

body#contact #center-column,
body#contact #center-column.cs-page-category__main {
  display: block !important;

  width: 100% !important;
  max-width: none !important;

  flex: 0 0 100% !important;
}

body#contact #center-column > .cs-container,
body#contact #center-column > .cs-container > .cs-container__inner {
  padding-bottom: 0 !important;
}

body#contact .page-content {
  width: 100%;
  max-width: none;

  margin: 0;
  padding: 0;
}


/* ============================================================
   3. GŁÓWNY WRAPPER
   ============================================================ */

body#contact .sk-contact {
  width: 100%;
  max-width: 1180px;

  margin: 15px auto 70px;
  padding: 0;

  color: var(--sk-text);

  font-family: inherit;

  background: transparent;
}

body#contact .sk-contact *,
body#contact .sk-contact *::before,
body#contact .sk-contact *::after {
  box-sizing: border-box;
}


/* ============================================================
   4. WAŻNE — RESET SVG
   TO NAPRAWIA GIGANTYCZNE IKONY
   ============================================================ */

body#contact .sk-contact svg {
  display: block;

  width: 20px;
  height: 20px;

  max-width: 100%;
  max-height: 100%;

  fill: currentColor;
}


/* ============================================================
   5. HERO / NAGŁÓWEK STRONY
   ============================================================ */

body#contact .sk-contact__hero {
  margin-bottom: 32px;
}

body#contact .sk-contact__hero-content {
  max-width: 760px;
}

body#contact .sk-contact__eyebrow {
  display: inline-block;

  margin-bottom: 10px;

  color: var(--sk-red);

  font-size: 12px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 0.13em;
  text-transform: uppercase;
}

body#contact .sk-contact__title {
  margin: 0 0 12px;

  color: var(--sk-black);

  font-size: 38px;
  font-weight: 700;
  line-height: 1.15;

  letter-spacing: -0.025em;
}

body#contact .sk-contact__subtitle {
  max-width: 700px;

  margin: 0;

  color: var(--sk-muted);

  font-size: 15px;
  font-weight: 400;
  line-height: 1.65;
}


/* ============================================================
   6. GRID
   ============================================================ */

body#contact .sk-contact__grid {
  display: grid;

  grid-template-columns: 350px minmax(0, 1fr);

  gap: 26px;

  align-items: stretch;
}


/* ============================================================
   7. LEWA KARTA INFORMACYJNA
   ============================================================ */

body#contact .sk-contact__info {
  position: relative;

  display: flex;
  flex-direction: column;

  min-height: 610px;

  padding: 34px;

  overflow: hidden;

  color: #ffffff;

  background:
    radial-gradient(
      circle at 100% 0%,
      rgba(230, 56, 43, 0.18) 0%,
      rgba(230, 56, 43, 0) 42%
    ),
    linear-gradient(
      145deg,
      #1b1b1b 0%,
      #0c0c0c 100%
    );

  border-radius: var(--sk-radius);
}

body#contact .sk-contact__info::before {
  content: "";

  position: absolute;
  top: 0;
  left: 34px;

  width: 58px;
  height: 4px;

  background: var(--sk-red);

  border-radius: 0 0 3px 3px;
}


/* ============================================================
   8. GÓRA LEWEJ KARTY
   ============================================================ */

body#contact .sk-contact__info-header {
  position: relative;
  z-index: 1;

  margin-bottom: 28px;
}

body#contact .sk-contact__info-overline {
  display: block;

  margin: 2px 0 15px;

  color: rgba(255, 255, 255, 0.5);

  font-size: 11px;
  font-weight: 700;

  line-height: 1.3;

  letter-spacing: 0.1em;
  text-transform: uppercase;
}

body#contact .sk-contact__info-title {
  margin: 0 0 14px;

  color: #ffffff;

  font-size: 25px;
  font-weight: 700;
  line-height: 1.22;

  letter-spacing: -0.02em;
}

body#contact .sk-contact__info-text {
  margin: 0;

  color: rgba(255, 255, 255, 0.64);

  font-size: 13px;
  font-weight: 400;
  line-height: 1.65;
}


/* ============================================================
   9. ELEMENTY KONTAKTOWE
   ============================================================ */

body#contact .sk-contact__info-item {
  display: flex;
  align-items: flex-start;

  gap: 14px;

  padding: 17px 0;

  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

body#contact .sk-contact__info-item:last-of-type {
  border-bottom: 0;
}

body#contact .sk-contact__info-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 42px;

  width: 42px;
  height: 42px;

  color: var(--sk-red);

  background: rgba(255, 255, 255, 0.07);

  border: 1px solid rgba(255, 255, 255, 0.1);

  border-radius: 9px;
}

body#contact .sk-contact__info-icon svg {
  width: 19px;
  height: 19px;
}

body#contact .sk-contact__info-body {
  min-width: 0;

  padding-top: 1px;
}

body#contact .sk-contact__info-label {
  display: block;

  margin-bottom: 4px;

  color: rgba(255, 255, 255, 0.45);

  font-size: 10px;
  font-weight: 700;
  line-height: 1.3;

  letter-spacing: 0.06em;
  text-transform: uppercase;
}

body#contact .sk-contact__info-value {
  display: inline-block;

  color: #ffffff;

  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;

  text-decoration: none;

  transition: color 0.2s ease;
}

body#contact a.sk-contact__info-value:hover {
  color: var(--sk-red);

  text-decoration: none;
}

body#contact .sk-contact__info-value--static {
  display: block;
}

body#contact .sk-contact__info-small {
  display: block;

  margin-top: 3px;

  color: rgba(255, 255, 255, 0.48);

  font-size: 11px;
  font-weight: 400;
  line-height: 1.45;
}


/* ============================================================
   10. DÓŁ LEWEJ KARTY
   ============================================================ */

body#contact .sk-contact__info-footer {
  margin-top: auto;
  padding-top: 26px;

  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

body#contact .sk-contact__status {
  display: flex;
  align-items: flex-start;

  gap: 11px;
}

body#contact .sk-contact__status-dot {
  display: block;

  flex: 0 0 8px;

  width: 8px;
  height: 8px;

  margin-top: 5px;

  background: #54b65d;

  border-radius: 50%;

  box-shadow: 0 0 0 4px rgba(84, 182, 93, 0.14);
}

body#contact .sk-contact__status-content strong {
  display: block;

  margin-bottom: 3px;

  color: #ffffff;

  font-size: 12px;
  font-weight: 650;
  line-height: 1.4;
}

body#contact .sk-contact__status-content span {
  display: block;

  color: rgba(255, 255, 255, 0.45);

  font-size: 11px;
  font-weight: 400;
}


/* ============================================================
   11. PRAWA KARTA
   ============================================================ */

body#contact .sk-contact__form-card {
  min-width: 0;

  overflow: hidden;

  background: #ffffff;

  border: 1px solid var(--sk-border);

  border-radius: var(--sk-radius);

  box-shadow:
    0 14px 45px rgba(0, 0, 0, 0.055);
}


/* ============================================================
   12. HEADER PRAWEJ KARTY
   ============================================================ */

body#contact .sk-contact__form-header {
  padding: 31px 34px 27px;

  background:
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfbfb 100%
    );

  border-bottom: 1px solid #ececec;
}

body#contact .sk-contact__form-overline {
  display: block;

  margin-bottom: 7px;

  color: var(--sk-red);

  font-size: 10px;
  font-weight: 800;
  line-height: 1;

  letter-spacing: 0.11em;
  text-transform: uppercase;
}

body#contact .sk-contact__form-title {
  margin: 0 0 7px;

  color: var(--sk-black);

  font-size: 25px;
  font-weight: 700;
  line-height: 1.2;

  letter-spacing: -0.015em;
}

body#contact .sk-contact__form-description {
  margin: 0;

  color: var(--sk-muted);

  font-size: 13px;
  font-weight: 400;
  line-height: 1.55;
}


/* ============================================================
   13. FORM
   ============================================================ */

body#contact .sk-contact__form {
  margin: 0;
  padding: 30px 34px 34px;
}

body#contact .sk-contact__fields {
  display: flex;
  flex-direction: column;

  gap: 21px;
}

body#contact .sk-contact__row {
  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 18px;
}

body#contact .sk-contact__field {
  min-width: 0;

  margin: 0;
}


/* ============================================================
   14. LABEL
   ============================================================ */

body#contact .sk-contact__label {
  display: flex;
  align-items: center;

  margin: 0 0 8px;

  color: #303030;

  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
}

body#contact .sk-contact__required {
  margin-left: 3px;

  color: var(--sk-red);
}

body#contact .sk-contact__optional {
  margin-left: 7px;

  color: #a2a2a2;

  font-size: 10px;
  font-weight: 400;
}


/* ============================================================
   15. INPUTY
   ============================================================ */

body#contact .sk-contact__control,
body#contact input.sk-contact__control,
body#contact select.sk-contact__control,
body#contact textarea.sk-contact__control {
  display: block;

  width: 100%;

  margin: 0;

  color: #202020 !important;

  font-family: inherit;
  font-size: 14px;
  font-weight: 400;

  background-color: #ffffff !important;

  border: 1px solid #d9d9d9 !important;

  border-radius: 8px !important;

  outline: none !important;

  box-shadow: none !important;

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background-color 0.18s ease;
}

body#contact input.sk-contact__control,
body#contact select.sk-contact__control {
  height: 50px;

  padding: 0 14px;
}

body#contact textarea.sk-contact__control {
  min-height: 170px;

  padding: 13px 14px;

  resize: vertical;

  line-height: 1.55;
}

body#contact .sk-contact__control::placeholder {
  color: #a6a6a6;

  opacity: 1;
}

body#contact .sk-contact__control:hover {
  border-color: #c4c4c4 !important;
}

body#contact .sk-contact__control:focus {
  border-color: var(--sk-red) !important;

  box-shadow:
    0 0 0 3px rgba(230, 56, 43, 0.09) !important;
}


/* ============================================================
   16. INPUT Z IKONĄ
   ============================================================ */

body#contact .sk-contact__input-wrap {
  position: relative;
}

body#contact .sk-contact__input-icon {
  position: absolute;

  top: 50%;
  left: 14px;

  z-index: 2;

  display: flex;

  width: 18px;
  height: 18px;

  color: #929292;

  pointer-events: none;

  transform: translateY(-50%);
}

body#contact .sk-contact__input-icon svg {
  width: 18px;
  height: 18px;
}

body#contact .sk-contact__control--icon {
  padding-left: 43px !important;
}


/* ============================================================
   17. SELECT
   ============================================================ */

body#contact .sk-contact__select {
  position: relative;
}

body#contact select.sk-contact__control {
  padding-right: 44px;

  appearance: none;
  -webkit-appearance: none;

  background-image: none !important;

  cursor: pointer;
}

body#contact .sk-contact__select-icon {
  position: absolute;

  top: 50%;
  right: 14px;

  display: flex;

  width: 20px;
  height: 20px;

  color: #777777;

  pointer-events: none;

  transform: translateY(-50%);
}

body#contact .sk-contact__select-icon svg {
  width: 20px;
  height: 20px;
}


/* ============================================================
   18. STATYCZNE POLE TEMATU
   ============================================================ */

body#contact .sk-contact__static {
  display: flex;
  align-items: center;

  width: 100%;
  height: 50px;

  padding: 0 14px;

  color: #333333;

  font-size: 14px;
  font-weight: 500;

  background: #f8f8f8;

  border: 1px solid #dedede;

  border-radius: 8px;
}


/* ============================================================
   19. UPLOAD
   ============================================================ */

body#contact .sk-contact__upload {
  display: flex;
  align-items: flex-start;

  gap: 14px;

  padding: 15px;

  background: #fafafa;

  border: 1px dashed #d2d2d2;

  border-radius: 9px;

  transition:
    border-color 0.2s ease,
    background-color 0.2s ease;
}

body#contact .sk-contact__upload:hover {
  background: #f8f8f8;

  border-color: #bababa;
}

body#contact .sk-contact__upload-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 40px;

  width: 40px;
  height: 40px;

  color: var(--sk-red);

  background: #ffffff;

  border: 1px solid #e4e4e4;

  border-radius: 8px;
}

body#contact .sk-contact__upload-icon svg {
  width: 19px;
  height: 19px;
}

body#contact .sk-contact__upload-body {
  flex: 1;

  min-width: 0;
}

body#contact .sk-contact__file {
  display: block;

  width: 100%;

  margin: 0;
  padding: 0;

  color: #555555;

  font-family: inherit;
  font-size: 12px;

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;
}

body#contact .sk-contact__file::file-selector-button {
  margin-right: 11px;
  padding: 8px 13px;

  color: #222222;

  font-family: inherit;
  font-size: 11px;
  font-weight: 650;

  cursor: pointer;

  background: #ffffff;

  border: 1px solid #d6d6d6;

  border-radius: 6px;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease;
}

body#contact .sk-contact__file::file-selector-button:hover {
  background: #f2f2f2;

  border-color: #bfbfbf;
}

body#contact .sk-contact__upload-text {
  display: block;

  margin-top: 8px;

  color: #919191;

  font-size: 10px;
  font-weight: 400;
  line-height: 1.45;
}


/* ============================================================
   20. GDPR
   ============================================================ */

body#contact .sk-contact__gdpr {
  margin: 0;
  padding: 0;
}

body#contact .sk-contact__gdpr .gdpr-consent {
  margin: 0;
  padding: 0;
}

body#contact .sk-contact__gdpr .form-check {
  display: flex !important;
  align-items: flex-start !important;

  gap: 10px;

  margin: 0 !important;
  padding: 0 !important;
}

body#contact .sk-contact__gdpr .form-check-input {
  position: static !important;

  flex: 0 0 18px;

  width: 18px !important;
  height: 18px !important;

  margin: 1px 0 0 !important;
  padding: 0 !important;

  cursor: pointer;

  accent-color: var(--sk-red);
}

body#contact .sk-contact__gdpr .form-check-label {
  margin: 0 !important;

  color: #737373;

  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;

  cursor: pointer;
}

body#contact .sk-contact__gdpr a {
  color: #333333;

  text-decoration: underline;

  text-underline-offset: 2px;
}

body#contact .sk-contact__gdpr a:hover {
  color: var(--sk-red);
}


/* ============================================================
   21. FOOTER FORMULARZA
   ============================================================ */

body#contact .sk-contact__form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-top: 27px;
  padding-top: 24px;

  border-top: 1px solid #ececec;
}

body#contact .sk-contact__form-footer-info {
  display: flex;
  align-items: center;

  gap: 8px;

  max-width: 350px;

  color: #929292;

  font-size: 10px;
  font-weight: 400;
  line-height: 1.45;
}

body#contact .sk-contact__form-footer-info svg {
  flex: 0 0 17px;

  width: 17px;
  height: 17px;

  color: #8b8b8b;
}


/* ============================================================
   22. BUTTON
   ============================================================ */

body#contact .sk-contact__submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  gap: 10px;

  flex: 0 0 auto;

  min-width: 205px;
  height: 51px;

  margin: 0 !important;
  padding: 0 22px !important;

  color: #ffffff !important;

  font-family: inherit;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1 !important;

  letter-spacing: 0.025em;
  text-transform: uppercase;

  cursor: pointer;

  background: var(--sk-red) !important;

  border: 1px solid var(--sk-red) !important;

  border-radius: 7px !important;

  box-shadow:
    0 7px 18px rgba(230, 56, 43, 0.19) !important;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}

body#contact .sk-contact__submit:hover {
  color: #ffffff !important;

  background: var(--sk-red-hover) !important;

  border-color: var(--sk-red-hover) !important;

  box-shadow:
    0 9px 23px rgba(230, 56, 43, 0.24) !important;

  transform: translateY(-1px);
}

body#contact .sk-contact__submit:active {
  transform: translateY(0);
}

body#contact .sk-contact__submit-icon {
  display: flex;

  width: 18px;
  height: 18px;
}

body#contact .sk-contact__submit-icon svg {
  width: 18px;
  height: 18px;

  transition: transform 0.2s ease;
}

body#contact .sk-contact__submit:hover .sk-contact__submit-icon svg {
  transform: translateX(3px);
}


/* ============================================================
   23. ALERTY
   ============================================================ */

body#contact .sk-contact__alert {
  display: flex;
  align-items: flex-start;

  gap: 12px;

  margin: 0 0 24px;
  padding: 14px 16px;

  border: 1px solid;

  border-radius: 8px;
}

body#contact .sk-contact__alert--error {
  color: #8c2922;

  background: #fff5f4;

  border-color: #efc8c4;
}

body#contact .sk-contact__alert--success {
  color: #2d7136;

  background: #f4faf5;

  border-color: #cbe4cf;
}

body#contact .sk-contact__alert-icon {
  display: flex;

  flex: 0 0 19px;

  width: 19px;
  height: 19px;
}

body#contact .sk-contact__alert-icon svg {
  width: 19px;
  height: 19px;
}

body#contact .sk-contact__alert-content {
  flex: 1;
}

body#contact .sk-contact__alert-content p {
  margin: 0 0 4px;

  font-size: 12px;
  line-height: 1.5;
}

body#contact .sk-contact__alert-content p:last-child {
  margin-bottom: 0;
}

/* ============================================================
   24. TABLET
   ============================================================ */

@media (max-width: 1050px) {

  body#contact .sk-contact {
    max-width: 100%;
    padding-left: 20px;
    padding-right: 20px;
  }

  body#contact .sk-contact__grid {
    grid-template-columns: 315px minmax(0, 1fr);
    gap: 20px;
  }

  body#contact .sk-contact__info {
    padding: 28px;
    min-height: 590px;
  }

  body#contact .sk-contact__info::before {
    left: 28px;
  }

  body#contact .sk-contact__form-header {
    padding-left: 28px;
    padding-right: 28px;
  }

  body#contact .sk-contact__form {
    padding-left: 28px;
    padding-right: 28px;
  }
}


/* ============================================================
   25. TABLET PION / MOBILE
   ============================================================ */

@media (max-width: 820px) {

  body#contact .sk-contact {
    margin-top: 5px;
    margin-bottom: 45px;
  }

  body#contact .sk-contact__hero {
    margin-bottom: 24px;
  }

  body#contact .sk-contact__title {
    font-size: 32px;
  }

  body#contact .sk-contact__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  body#contact .sk-contact__info {
    min-height: auto;
    padding: 28px;
  }

  body#contact .sk-contact__info-footer {
    margin-top: 28px;
  }
}


/* ============================================================
   26. DESKTOP SZEROKI — BEZ ZMIAN
   ============================================================ */

@media (min-width: 1280px) {

  body#contact .sk-contact {
    max-width: 1380px;
  }

  body#contact .sk-contact__grid {
    grid-template-columns: 365px minmax(0, 1fr);
    gap: 32px;
  }
}


/* ============================================================
   27. TELEFONY — FINALNA WERSJA
   Bardzo małe marginesy zewnętrzne: 3px
   ============================================================ */

@media (max-width: 600px) {

  /* cała sekcja prawie do krawędzi ekranu */
  body#contact .sk-contact {
    padding-left: 3px !important;
    padding-right: 3px !important;
    margin-top: 2px;
    margin-bottom: 28px;
  }

  /* nagłówek */
  body#contact .sk-contact__hero {
    margin-bottom: 18px;
  }

  body#contact .sk-contact__eyebrow {
    margin-bottom: 8px;
    font-size: 10px;
  }

  body#contact .sk-contact__title {
    font-size: 25px;
    line-height: 1.16;
    margin-bottom: 8px;
  }

  body#contact .sk-contact__subtitle {
    font-size: 12px;
    line-height: 1.55;
  }

  /* układ jednej kolumny */
  body#contact .sk-contact__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  /* lewa karta */
  body#contact .sk-contact__info {
    min-height: auto;
    padding: 18px 16px !important;
    border-radius: 10px;
  }

  body#contact .sk-contact__info::before {
    left: 16px;
    width: 42px;
    height: 3px;
  }

  body#contact .sk-contact__info-header {
    margin-bottom: 16px;
  }

  body#contact .sk-contact__info-overline {
    margin-bottom: 10px;
    font-size: 10px;
  }

  body#contact .sk-contact__info-title {
    font-size: 19px;
    line-height: 1.2;
    margin-bottom: 10px;
  }

  body#contact .sk-contact__info-text {
    font-size: 11px;
    line-height: 1.55;
  }

  body#contact .sk-contact__info-item {
    gap: 10px;
    padding: 12px 0;
  }

  body#contact .sk-contact__info-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
  }

  body#contact .sk-contact__info-icon svg {
    width: 16px;
    height: 16px;
  }

  body#contact .sk-contact__info-label {
    font-size: 9px;
    margin-bottom: 3px;
  }

  body#contact .sk-contact__info-value {
    font-size: 12px;
    line-height: 1.35;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  body#contact .sk-contact__info-small {
    font-size: 10px;
    line-height: 1.35;
    margin-top: 2px;
  }

  body#contact .sk-contact__info-footer {
    margin-top: 18px;
    padding-top: 16px;
  }

  body#contact .sk-contact__status-content strong {
    font-size: 11px;
  }

  body#contact .sk-contact__status-content span {
    font-size: 10px;
  }

  /* prawa karta */
  body#contact .sk-contact__form-card {
    border-radius: 10px;
  }

  body#contact .sk-contact__form-header {
    padding: 18px 16px 16px !important;
  }

  body#contact .sk-contact__form-overline {
    font-size: 10px;
    margin-bottom: 6px;
  }

  body#contact .sk-contact__form-title {
    font-size: 19px;
    margin-bottom: 6px;
  }

  body#contact .sk-contact__form-description {
    font-size: 11px;
    line-height: 1.45;
  }

  body#contact .sk-contact__form {
    padding: 16px 16px 18px !important;
  }

  body#contact .sk-contact__fields {
    gap: 16px;
  }

  body#contact .sk-contact__row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  body#contact .sk-contact__label {
    font-size: 11px;
    margin-bottom: 6px;
  }

  body#contact .sk-contact__optional {
    font-size: 9px;
  }

  /* pola — 16px zostaje, żeby Safari/iPhone nie zoomował formularza */
  body#contact input.sk-contact__control,
  body#contact select.sk-contact__control,
  body#contact textarea.sk-contact__control {
    font-size: 16px;
  }

  body#contact input.sk-contact__control,
  body#contact select.sk-contact__control {
    height: 46px;
  }

  body#contact textarea.sk-contact__control {
    min-height: 150px;
    padding: 11px 12px;
  }

  /* upload */
  body#contact .sk-contact__upload {
    padding: 10px 11px;
    border-radius: 8px;
  }

  body#contact .sk-contact__upload-icon {
    display: none;
  }

  body#contact .sk-contact__upload-text {
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.4;
  }

  /* komunikaty */
  body#contact .sk-contact__alert {
    margin-bottom: 18px;
    padding: 11px 12px;
    gap: 9px;
  }

  body#contact .sk-contact__alert-content p {
    font-size: 11px;
    line-height: 1.45;
  }

  /* GDPR */
  body#contact .sk-contact__gdpr .form-check-label {
    font-size: 10px;
    line-height: 1.45;
  }

  /* Turnstile */
  body#contact .sk-contact__turnstile {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  /* dół formularza */
  body#contact .sk-contact__form-footer {
    flex-direction: column;
    align-items: stretch;
    margin-top: 18px;
    padding-top: 16px;
    gap: 12px;
  }

  body#contact .sk-contact__form-footer-info {
    max-width: none;
    font-size: 10px;
    line-height: 1.4;
  }

  body#contact .sk-contact__submit {
    width: 100%;
    min-width: 0;
    height: 48px;
    font-size: 11px !important;
    padding: 0 18px !important;
    border-radius: 7px !important;
  }
}


/* ============================================================
   28. BARDZO MAŁE TELEFONY
   Margines zewnętrzny: 2px
   ============================================================ */

@media (max-width: 390px) {

  body#contact .sk-contact {
    padding-left: 2px !important;
    padding-right: 2px !important;
  }

  body#contact .sk-contact__info {
    padding: 16px 14px !important;
  }

  body#contact .sk-contact__info::before {
    left: 14px;
    width: 38px;
  }

  body#contact .sk-contact__form-header,
  body#contact .sk-contact__form {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  body#contact .sk-contact__title {
    font-size: 23px;
  }

  body#contact .sk-contact__info-title,
  body#contact .sk-contact__form-title {
    font-size: 18px;
  }
}













/* =========================================================
   SUPERKOMIN – WYSZUKIWARKA HEADER
   DESKTOP + MOBILE
   ========================================================= */

.header-search {
    position: relative;
    width: min(620px, 46vw);
    max-width: 100%;
    margin: 0 auto;
}


/* =========================================================
   FORMULARZ
   ========================================================= */

.header-search__form {
    display: flex !important;
    align-items: stretch;

    width: 100%;
    height: 52px;

    margin: 0 !important;
    padding: 0 !important;

    background: #fff;

    border: 1px solid #d8d8d8 !important;
    border-radius: 7px;

    overflow: hidden;

    box-shadow: none !important;

    transition:
        border-color .2s ease,
        box-shadow .2s ease;
}


/* Usunięcie starych kresek / pseudo-elementów */
.header-search__form::before,
.header-search__form::after {
    display: none !important;
    content: none !important;
}


/* =========================================================
   FOCUS – CZERWONY AKCENT
   ========================================================= */

.header-search__form:focus-within {
    border-color: #e6382b !important;

    box-shadow:
        0 0 0 2px rgba(230, 56, 43, .10) !important;
}


/* =========================================================
   INPUT
   ========================================================= */

.header-search__input {
    flex: 1 1 auto;
    min-width: 0;

    height: 100% !important;

    margin: 0 !important;
    padding: 0 18px !important;

    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;

    background: transparent !important;

    color: #171717 !important;

    font-size: 16px !important;
    font-weight: 400;
    line-height: 1.2;

    box-shadow: none !important;

    appearance: none;
    -webkit-appearance: none;
}


.header-search__input::placeholder {
    color: #888 !important;
    opacity: 1;
    font-weight: 400;
}


/* =========================================================
   PRZYCISK LUPY
   ========================================================= */

.header-search__submit {
    flex: 0 0 54px;

    width: 54px !important;
    height: 100% !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: #111 !important;
    color: #fff !important;

    cursor: pointer;

    box-shadow: none !important;

    transition:
        background-color .18s ease,
        color .18s ease;
}


.header-search__submit svg {
    display: block;

    width: 21px;
    height: 21px;

    transition: transform .18s ease;
}


/* =========================================================
   HOVER DESKTOP
   ========================================================= */

@media (hover: hover) {

    .header-search__submit:hover {
        background: #e6382b !important;
        color: #fff !important;
    }

    .header-search__submit:hover svg {
        transform: scale(1.07);
    }
}


.header-search__submit:active svg {
    transform: scale(.94);
}


/* =========================================================
   AUTOCOMPLETE
   ========================================================= */

.header-search__results {
    position: absolute;

    left: 0;
    right: 0;
    top: calc(100% + 7px);

    width: 100%;
    max-height: 420px;

    overflow-y: auto;

    background: #fff;

    border: 1px solid #e1e1e1;
    border-radius: 7px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .12);

    z-index: 9999;
}


.header-search__results[hidden] {
    display: none !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1100px) {

    .header-search {
        width: min(520px, 48vw);
    }

    .header-search__form {
        height: 50px;
    }

    .header-search__submit {
        flex-basis: 52px;
        width: 52px !important;
    }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

    .header-search {
        width: calc(100% - 16px) !important;
        max-width: none !important;

        margin: 8px auto 10px !important;
    }

    .header-search__form {
        width: 100% !important;
        height: 48px;

        border-radius: 6px;
    }

    .header-search__input {
        padding: 0 13px !important;

        font-size: 15px !important;
    }

    .header-search__submit {
        flex: 0 0 49px;

        width: 49px !important;
    }

    .header-search__submit svg {
        width: 20px;
        height: 20px;
    }

    .header-search__results {
        top: calc(100% + 5px);

        max-height: 60vh;

        border-radius: 6px;
    }
}


/* =========================================================
   BARDZO MAŁE TELEFONY
   ========================================================= */

@media (max-width: 380px) {

    .header-search {
        width: calc(100% - 12px) !important;
    }

    .header-search__form {
        height: 46px;
    }

    .header-search__input {
        padding-left: 12px !important;
        font-size: 14px !important;
    }

    .header-search__submit {
        flex-basis: 47px;
        width: 47px !important;
    }
}

/* =========================================================
   FRAGMENT: BLOKADA POZIOMEGO PRZESUWANIA STRONY - MOBILE
   ========================================================= */
/* =========================================================
   BLOKADA POZIOMEGO PRZESUWANIA STRONY - MOBILE
   Slider nadal można przesuwać palcem
   ========================================================= */

@media (max-width: 767.98px) {

    html,
    body {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    #header,
    main,
    #wrapper,
    #content-wrapper {
        max-width: 100% !important;
    }
}

/* =========================================================
   FRAGMENT: LOGO MOBILE, HAMBURGER MENU
   ========================================================= */
/* =========================================================
   MOBILE — HAMBURGER / X W DOKŁADNIE TYM SAMYM MIEJSCU
   ========================================================= */

@media (max-width: 767.98px) {

    /* identyczne pudełko dla hamburgera i X */
    #header .hamb,
    #header #closeMenu {
        width: 34px !important;
        height: 34px !important;

        min-width: 34px !important;
        min-height: 34px !important;

        box-sizing: border-box !important;

        margin: 0 !important;
        padding: 0 !important;

        position: relative !important;

        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        float: none !important;

        align-self: center !important;
        justify-self: start !important;

        align-items: center !important;
        justify-content: center !important;
        transform: translateX(-4px) !important;
    }


    /* hamburger */
    #header .hamb {
        display: flex !important;
        flex-direction: column !important;

        gap: 5px !important;

        background: transparent !important;
        border: 0 !important;
    }

    #header .hamb span {
        width: 24px !important;
        height: 2px !important;

        margin: 0 !important;

        background: #111 !important;
    }


    /* X */
  #header #closeMenu {
    display: flex !important;

    background: #f5f5f5 !important;

    border: 2px solid #d8d8d8 !important;
    border-radius: 50% !important;

    color: transparent !important;

    font-size: 0 !important;
    line-height: 1 !important;

    opacity: 1 !important;

    box-shadow:
        0 1px 3px rgba(0, 0, 0, .06) !important;

    cursor: pointer;
}


#header #closeMenu::before,
#header #closeMenu::after {
    content: "" !important;

    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    width: 18px !important;
    height: 2.5px !important;

    margin: 0 !important;

    background: #111 !important;

    border: 0 !important;
    border-radius: 2px !important;

    transform-origin: center !important;
}


    #header #closeMenu::before {
        transform:
            translate(-50%, -50%)
            rotate(45deg) !important;
    }


    #header #closeMenu::after {
        transform:
            translate(-50%, -50%)
            rotate(-45deg) !important;
    }


    #header .hamb.hidden,
    #header #closeMenu.hidden {
        display: none !important;
    }

}





/* =========================================================
   LOGO MOBILE rozmiar
   ========================================================= */

/* =========================================================
   HEADER MOBILE — WIĘKSZE LOGO + MIEJSCE NA HAMBURGER
   ========================================================= */

@media (max-width: 767.98px) {

    #header .topbar {
        grid-template-columns: 34px 155px minmax(0, 1fr) !important;
    }

    #header .hamb,
    #header #closeMenu {
        grid-column: 1 !important;
        justify-self: start !important;
        z-index: 2 !important;
    }

    #header .logo {
        grid-column: 2 !important;
        justify-self: start !important;
        min-width: 0 !important;
    }

    #header .logo .cs-logo__image {
        width: 155px !important;
        max-width: 155px !important;
        height: auto !important;
        display: block !important;
    }

    #header .nav-right {
        grid-column: 3 !important;
        justify-self: end !important;
        min-width: 0 !important;
    }

    #header .header-search {
        grid-column: 1 / -1 !important;
        grid-row: 2 !important;
    }
}

/* =========================================================
   FRAGMENT: PRZYCISK KONFIGURUJ NA MOBILE
   ========================================================= */
/* =========================================================
   Przycisk konfigurj na mobile FINAL - MOBILE HEADER + KONFIGURATOR
   ========================================================= */


/* Konfigurator niewidoczny w koszyku i checkout */
body#cart #header .utility,
body#checkout #header .utility {
    display: none !important;
}


@media (max-width: 767.98px) {

    /* -----------------------------------------------------
       HEADER
       ----------------------------------------------------- */

    #header {
        margin-bottom: -24px !important;
        padding-bottom: 0 !important;
    }

    #header > .cs-container__inner {
        display: flex !important;
        flex-direction: column !important;

        margin: 0 !important;
        padding-bottom: 0 !important;

        min-width: 0 !important;
    }


    /* -----------------------------------------------------
       .utility siedzi wewnątrz .navbar
       ----------------------------------------------------- */

    #header .navbar {
        display: contents !important;
    }


    /* Desktopowe menu chowamy na mobile */
    #header .cs-container--navigation {
        display: none !important;
    }


    /* -----------------------------------------------------
       KONFIGURATOR
       ----------------------------------------------------- */

    #header .utility {
        order: -100 !important;

        position: static !important;
        top: auto !important;
        right: auto !important;
        bottom: auto !important;
        left: auto !important;

        display: block !important;

        /*
         * WAŻNE:
         * NIE używamy już width: calc(100% + 2rem),
         * bo powodowało poziomy scroll strony.
         *
         * width:auto + ujemne marginesy rozszerzają pasek
         * dokładnie do krawędzi bez zwiększania viewportu.
         */
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;

        align-self: stretch !important;

        height: 40px !important;

        /*
         * -1px od góry usuwa białą kreskę
         * między czarnym paskiem a czerwonym.
         *
         * -1rem po bokach kasuje padding headera.
         */
        margin: -1px -1rem 0 -1rem !important;
        padding: 0 !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    #header .product-configurator-header {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 40px !important;
        min-height: 40px !important;

        margin: 0 !important;
        padding: 0 14px !important;

        background: #e6382b !important;
        color: #fff !important;

        border: 0 !important;
        border-radius: 0 !important;
        box-shadow: none !important;

        font-size: 13px !important;
        font-weight: 700 !important;
        line-height: 1 !important;
        letter-spacing: .04em !important;
        text-transform: uppercase !important;
        text-decoration: none !important;

        box-sizing: border-box !important;
    }


    #header .product-configurator-header::after {
        content: "→";
        display: inline-block;

        margin-left: 10px;

        font-size: 17px;
        font-weight: 400;
        line-height: 1;
    }


    #header .product-configurator-header:hover,
    #header .product-configurator-header:focus,
    #header .product-configurator-header:active {
        background: #cf3025 !important;
        color: #fff !important;
        text-decoration: none !important;
        box-shadow: none !important;
    }


    /* -----------------------------------------------------
       WŁAŚCIWY HEADER
       ----------------------------------------------------- */

    #header .topbar {
        order: 0 !important;

        margin-top: 0 !important;
        margin-bottom: 0 !important;

        padding-bottom: 0 !important;

        min-height: 0 !important;
        height: auto !important;
        min-width: 0 !important;
    }


    #header .header-search {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
        min-width: 0 !important;
    }
}