/* =============================================================================
   S500 new front-end layout. Loaded only by the -new pages, via shared/layout500.

   Kolory nie sa juz brane z ustawien firmy. Wizytowka jest czescia serwis500 i
   ma miec palete marki, wiec kazda wartosc idzie z tokenow ponizej. Skora
   zewnetrzna dostanie ten sam layout z innym blokiem :root - i to ma byc
   jedyne miejsce, ktore sie rozni. Dlatego nigdy nie wpisujemy koloru wprost
   w regule, tylko dokladamy token.

   Cascade trap, ktory zyje poza tym plikiem: mainhome_old.css:3177 ma globalne
   *:focus{outline:none}, wiec fokus z klawiatury nie istnieje, dopoki regula
   stad go nie przywroci (patrz :focus-visible nizej).

   Deliberate deviations from the Figma file, requested by the client - do not
   "fix" them back: card radius 17px to 12px, larger gaps and vertical rhythm,
   smaller fonts inside selects, field labels 12/20 to 14/22.
   ============================================================================= */



:root {

    --s500-label-medium-size: 14px;
    --s500-label-medium-line: 22px;

    --s500-block: clamp(32px, 3.34vw, 48px);
    --s500-col-gap: clamp(16px, 1.67vw, 24px);
    --s500-card-pad: clamp(20px, 2.23vw, 32px);
    --s500-panel-pad: clamp(16px, 1.67vw, 24px);
    --s500-card-radius: 12px;
    --s500-field-row-gap: clamp(16px, 1.67vw, 24px);
    --s500-field-col-gap: 16px;

    --s500-field-border: rgba(66, 66, 66, 0.35);

    --s500-page-bg: #f6f6f6;

    /* Paleta marki. Zolcie sa trzy, bo tyle rozroznia projekt: glowna do obrysow
       i wyroznien, ciemniejsza do paginacji, jasniejsza pod wypelnione przyciski.
       --s500-accent to ten sam odcien co --nsrv-yellow w nsrv_base.css, a
       --s500-highlight co --nsrv-red, wiec wizytowka i strona glowna trzymaja
       jedna palete. --s500-focus nie jest kolorem marki, tylko obrysem fokusa,
       i ma zostac kontrastowy niezaleznie od skory. */
    --s500-accent: #ffb700;
    --s500-accent-deep: #f6b100;
    --s500-accent-soft: #ffc42e;
    --s500-highlight: #ff1000;
    --s500-focus: #0044ff;

    --s500-gutter: clamp(16px, 1.67vw, 24px);

    --s500-ruch: 0.15s ease;
    --s500-blad: #d92020;
}

/* Tresc ma sie trzymac nagłówka: .nsrv_header_in to max-width 1440 i padding
   84px, czyli 1272px tresci, jak w Figmie (1854:5016). .ct z mainhome_old.css
   ma 1640 i zero paddingu, wiec sama szerokosc nie wystarczy, reszte robi
   gutter. Marginesy z ramek: 1440 -> 84, 1024 i 768 -> 48, 530 -> 24; progi
   te same co w nsrv_base.css, zeby logo i tresc schodzily sie razem. */
.s500-shell .ct {
    max-width: 1440px;
}

.s500-shell {
    --s500-gutter: 84px;
}

@media (max-width: 1100px) {
    .s500-shell {
        --s500-gutter: 48px;
    }
}

@media (max-width: 600px) {
    .s500-shell {
        --s500-gutter: 24px;
    }
}

.s500-breadcrumbs .s500-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin: 0;
    padding: 8px var(--s500-gutter);
    list-style: none;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: var(--s500-label-medium-size);
    font-weight: 400;
    line-height: var(--s500-label-medium-line);
    letter-spacing: 0;
    color: #000;
}

.s500-breadcrumbs__list li {
    display: flex;
    align-items: center;
}

.s500-breadcrumbs__list li + li::before {
    content: '>';
    margin: 0 5px;
}

.s500-breadcrumbs__list a {
    color: #000;
}

.s500-breadcrumbs__list a:hover {
    text-decoration: underline;
}

.s500-breadcrumbs + .section {
    padding-top: 0;
}

.section:has(> .ct > .s500-listing):not(:has(.s500-promo)) {
    margin-bottom: 0;
}

.s500-listing-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    padding: 0 var(--s500-gutter);
    margin-bottom: 20px;
}

.s500-listing-head__titles {
    min-width: 0;
}

.s500-listing-head__kicker,
.s500-section-head__kicker {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--s500-highlight);
}

.s500-listing-head__title,
.s500-section-head__title {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 44px;
    letter-spacing: 0;
    color: #000;
}

.s500-listing-head .sectionfilter {
    flex: 0 0 166px;
    width: 166px;
    margin-bottom: 0;
    box-shadow: none;
}

.s500-listing-head .sectionfilter_secs {
    padding: 0;
}

.s500-listing-head .sectionfilter_sec {
    display: block;
    width: 100%;
    max-width: none;
    margin: 0;
}

.s500-listing-head .sectionfilter_sec span {
    display: block;
    margin: 0 0 4px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    color: #495057;
}

.s500-listing-head select.product-select {
    width: 100%;
    height: 36px;
    padding: 0 40px 0 12px;

    font-size: 14px;
    line-height: 22px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--s500-field-border) !important;
    border-radius: 4px;
    background-color: #fff;
    background-image: url('/img/s500/selectarrow.svg');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px 16px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-weight: 400;
    color: #000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

@media (max-width: 800px) {
    .s500-listing-head .sectionfilter {
        width: 100%;
        max-width: 100%;
    }

    .s500-breadcrumbs + .section {
        padding-top: 0;
    }
}

.s500-card {
    position: relative;
    margin: 0 0 var(--s500-col-gap);
    /* the desktop card keeps Figma's 32px at 1440 and 1024 alike; the tablet
       and phone variants below set their own 16px */
    padding: 32px;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: var(--s500-card-radius);
    box-shadow: 6px -3px 25.75px rgba(0, 0, 0, 0.04);
}

.s500-card__main {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 24px;
}

.s500-card__badge {
    position: absolute;
    top: 23px;
    left: 23px;
    width: 24px;
    height: 24px;
}

.s500-card__photo {
    display: block;
    flex: 0 0 146px;
    width: 146px;
    height: 198px;
}

.s500-card__photo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Figma 1856:5838: 189px with the three groups spread apart, which with one-line
   content leaves 18px between them. A model name that wraps used to overflow the
   fixed height and glue the brand to the tags, so 189 is now a minimum and the
   18px a gap that always stays. */
.s500-card__info {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    min-height: 189px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.s500-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.s500-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 4px;
    border: 1px solid #b3b3b3;
    border-radius: 4px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: #000;
}

.s500-tag--klasa { border-color: #ffb700; }
.s500-tag--typ { border-color: #0044ff; }

.s500-tag--new {
    border-color: #ff8310;
    color: #ff8310;
    font-weight: 700;
}

.s500-card__titles {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.s500-card__brand {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: #000;
}

.s500-card__brand a { color: #000; }

.s500-card__model {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #000;
}

.s500-card__params {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.s500-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.s500-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 2px 4px;
    border: 1px solid #b3b3b3;
    border-radius: 4px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: #000;
}

.s500-chip--toczenie::before,
.s500-chip--przyczepnosc::before,
.s500-chip--halas::before {
    content: '';
    flex: 0 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.s500-chip--toczenie::before {
    width: 12px;
    height: 14px;
    background-image: url('/img/s500/icon-toczenie.svg');
}

.s500-chip--przyczepnosc::before {
    width: 15px;
    height: 14px;
    background-image: url('/img/s500/icon-przyczepnosc.svg');
}

.s500-chip--halas::before {
    width: 18px;
    height: 14px;
    background-image: url('/img/s500/icon-halas.svg');
}

.s500-card__season {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 13px;
    color: #000;
}

.s500-card__buy {
    display: flex;
    flex: 0 0 245px;
    width: 245px;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 10px;
}

.s500-card__price {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    color: #000;
}

.s500-card__price strong {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
}

.s500-card__price span {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
}

.s500-card__stock {
    display: flex;
    flex-direction: column;
    gap: 2px;
    --s500-stock: #ffb700;
}

.s500-card__stock--low { --s500-stock: #ff1000; }
.s500-card__stock--mid { --s500-stock: #ffb700; }
.s500-card__stock--high { --s500-stock: #1daf00; }

.s500-card__stock-label {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: var(--s500-stock);
}

.s500-card__stock-bar {
    width: 143px;
    height: 10px;
    background: #fff;
    border: 1px solid var(--s500-stock);
    border-radius: 5px;
    overflow: hidden;
}

.s500-card__stock-bar span {
    display: block;
    height: 100%;
    background: var(--s500-stock);
    border-radius: 5px;
}

.s500-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

select.s500-card__qty {
    flex: 0 0 auto;
    height: 50px;
    padding: 0 40px 0 16px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--s500-field-border) !important;
    border-radius: 4px;
    background-color: #fff;
    background-image: url('/img/s500/selectarrow.svg');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: #000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

button.s500-card__cta {
    flex: 1 1 0;
    min-width: 0;
    padding: 14px 24px;
    border: 0;
    border-radius: 4px;
    background: #ffc42e;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: #000;
    cursor: pointer;
}

.s500-card__note {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #000;
}

.s500-card__note::before {
    content: '';
    flex: 0 0 auto;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.s500-card__note--delivery::before {
    width: 19px;
    height: 12.45px;
    background-image: url('/img/s500/icon-dostawa.svg');
}

.s500-card__note--mount::before {
    width: 19px;
    height: 19px;
    background-image: url('/img/s500/icon-montaz.svg');
}

.s500-card__note strong { font-weight: 700; }

.s500-card__banner {
    padding: 20px 0 0;
}

.s500-card__banner .bn_d {
    display: block;
    width: auto;
    max-width: 100%;
    max-height: 100px;
    margin: 0 auto;
}

.s500-card__banner .bn_m { display: none; }

@media (max-width: 800px) {
    .s500-card__banner .bn_d { display: none; }

    .s500-card__banner .bn_m {
        display: block;
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
    }
}

/* --------------------------------------------------------------------------
   Karta opony: trzy warianty z Figmy
   --------------------------------------------------------------------------
   Zaleza od szerokosci listy kart (.products), nie ekranu, bo z filtrami obok
   lista jest waska na szerokim ekranie. Szerokosci kart w ramkach:
   1440 -> 882, 1024 -> 928 (wariant desktop, 1856:5838), 768 -> 672
   (tablet, 1856:9101), 530 -> 482 (telefon, 1856:12038). */
.products:has(> .s500-card) {
    container: s500-lista / inline-size;
}

/* tablet (1856:9101): padding 16, zdjecie 125x186 obok nazwy, po prawej
   kolumna 221px: cena, ilosc i przycisk, stan, dostawa i montaz 10px */
@container s500-lista (min-width: 561px) and (max-width: 760px) {
    .s500-card {
        padding: 16px;
    }

    .s500-card__main {
        gap: 12px;
    }

    .s500-card__photo {
        flex: 0 0 125px;
        width: 125px;
        height: 186px;
        margin-right: -4px;
    }

    .s500-card__info {
        min-height: 0;
        align-self: stretch;
        justify-content: flex-start;
        gap: 18px;
    }

    .s500-card__titles {
        gap: 8px;
    }

    .s500-card__model {
        line-height: 23px;
    }

    .s500-card__params {
        gap: 8px;
    }

    .s500-card__buy {
        flex: 0 0 221px;
        width: 221px;
        gap: 8px;
    }

    .s500-card__price { order: 0; }
    .s500-card__actions { order: 1; }
    .s500-card__stock { order: 2; }
    .s500-card__note { order: 3; }

    select.s500-card__qty {
        height: 40px;
        padding-left: 16px;
    }

    button.s500-card__cta {
        padding: 8px 16px;
        white-space: nowrap;
    }

    .s500-card__note {
        font-size: 10px;
    }

    .s500-card__note--delivery::before {
        width: 18px;
        height: 12px;
    }

    .s500-card__note--mount::before {
        width: 12px;
        height: 12px;
    }
}

/* telefon (1856:12038): tagi w prawym gornym rogu, zdjecie na srodku, nazwa
   i etykiety, kreska, pod nia po lewej ilosc ze stanem i dostawa, po prawej
   (181px) cena i szeroki przycisk. Kontenery info, zakupu i formularza znikaja
   z ukladu (display: contents), wiec ich dzieci staja w siatce karty, a
   formularz dalej wysyla ilosc. */
@container s500-lista (max-width: 560px) {
    .s500-card {
        padding: 16px;
    }

    .s500-card__main {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) 181px;
        grid-template-areas:
            "tags  tags  tags"
            "photo photo photo"
            "names names names"
            "par   par   par"
            "qty   stock price"
            "dost  dost  cta"
            "mont  mont  cta";
        column-gap: 12px;
        row-gap: 15px;
        align-items: center;
    }

    .s500-card__info,
    .s500-card__buy,
    .s500-card__actions {
        display: contents;
    }

    .s500-card__tags {
        grid-area: tags;
        justify-self: end;
    }

    .s500-card__photo {
        grid-area: photo;
        justify-self: center;
        width: auto;
        max-width: 100%;
        height: 198px;
    }

    .s500-card__photo img {
        width: auto;
        max-width: 100%;
        height: 198px;
    }

    .s500-card__titles {
        grid-area: names;
        gap: 8px;
    }

    .s500-card__params {
        grid-area: par;
        margin-top: -7px;
        padding-bottom: 16px;
        border-bottom: 1px solid #e3e3e3;
    }

    select.s500-card__qty {
        grid-area: qty;
        height: 46px;
    }

    .s500-card__stock {
        grid-area: stock;
        min-width: 0;
    }

    .s500-card__stock-bar {
        width: 100%;
    }

    .s500-card__price {
        grid-area: price;
        justify-self: center;
    }

    button.s500-card__cta {
        grid-area: cta;
        align-self: end;
        width: 100%;
        margin-left: 4px;
        padding: 14px 24px;
    }

    .s500-card__note--delivery {
        grid-area: dost;
    }

    .s500-card__note--mount {
        grid-area: mont;
        margin-top: -11px;
    }

    .s500-card__note {
        width: auto;
        white-space: nowrap;
    }
}

/* Telefon wezszy niz ramka (lista ponizej 440px, czyli ekran ponizej ~480):
   w trzech kolumnach stan magazynu zostawal z 0px, a dostawa i montaz (nowrap)
   wchodzily pod przycisk. Dwie rowne kolumny: stan | cena, ilosc | przycisk,
   pod nimi dostawa i montaz na cala szerokosc. */
@container s500-lista (max-width: 440px) {
    .s500-card__main {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas:
            "tags  tags"
            "photo photo"
            "names names"
            "par   par"
            "stock price"
            "qty   cta"
            "dost  dost"
            "mont  mont";
    }

    .s500-card__price {
        justify-self: end;
        white-space: nowrap;
    }

    .s500-card__price strong {
        font-size: 28px;
        line-height: 36px;
    }

    .s500-card__price span {
        font-size: 16px;
        line-height: 24px;
    }

    select.s500-card__qty {
        width: 100%;
    }

    button.s500-card__cta {
        align-self: stretch;
        margin-left: 0;
        padding: 14px 12px;
    }

    .s500-card__note--mount {
        margin-top: -7px;
    }

    .s500-card__note {
        white-space: normal;
    }
}

.s500-listing {
    /* above the title and between it and the results: 48px at 1440, 24px from
       1024 down (Figma 1854:5016 / 5171 / 5326 / 5480) */
    --s500-listing-odstep: 48px;
    display: grid;
    grid-template-columns: 366px minmax(0, 1fr);
    column-gap: var(--s500-col-gap);

    padding: var(--s500-listing-odstep) var(--s500-gutter) var(--s500-block);
    background: var(--s500-page-bg);

    box-shadow: 0 0 0 100vmax var(--s500-page-bg);
    clip-path: inset(0 -100vmax);
}

@media (max-width: 1100px) {
    .s500-listing {
        --s500-listing-odstep: 24px;
    }
}

.s500-listing > .s500-listing-head {
    grid-column: 1 / -1;
    grid-row: 1;

    margin-bottom: var(--s500-listing-odstep);
    padding: 0;
}

.s500-listing > .sectionfilter {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin-bottom: 0;
    padding: var(--s500-panel-pad);
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: var(--s500-card-radius);
    box-shadow: 6px -3px 25.75px rgba(0, 0, 0, 0.04);
}

.s500-listing > .products {
    grid-column: 2;
    grid-row: 2;
}

/* set by the script in listing.blade.php only when the whole panel fits in the
   window; beside the results only, below 1031px it sits above them */
.s500-listing > .sectionfilter.s500-filtry-przyklejone {
    position: sticky;
    top: 24px;
}

.s500-listing > .sectionfilter .t1section {
    background: none !important;
    padding: 10px 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
    text-align: center;
    color: #000;
}

.s500-listing #frm {
    /* Figma 1854:5016: 12px between fields in a row, 16px between rows */
    --s500-field-col-gap: 12px;
    --s500-field-row-gap: 16px;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--s500-field-col-gap);
    row-gap: var(--s500-field-row-gap);
}

.s500-listing #frm .sectionfilter_secs,
.s500-listing #frm #filter_more_ct,
.s500-listing #frm #filter_more_ct_in {
    display: contents;
}

.s500-listing #frm #filter_more {
    display: none;
}

.s500-listing #frm .sectionfilter_sec {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: auto;
    max-width: none !important;
    margin: 0;
}

.s500-listing #frm .sectionfilter_sec > span,
.s500-listing #frm .s500-fgroup {
    display: block;
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    color: #495057;
}

.s500-listing #frm select.product-select {
    width: 100%;
    max-width: none !important;
    height: 36px;
    padding: 0 28px 0 6px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--s500-field-border) !important;
    border-radius: 4px;
    background-color: #fff;
    background-image: url('/img/s500/selectarrow.svg');
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 16px 16px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

@keyframes s500-select-fallback {
    to { visibility: visible; }
}

.s500-listing #frm select[multiple]:not(.multidone) {
    width: 100%;
    max-width: none !important;
    height: 36px;
    visibility: hidden;
    animation: s500-select-fallback 0s linear 3s forwards;
}

.s500-listing #frm .multiselect-dropdown {
    display: flex;
    align-items: center;
    width: 100% !important;
    /* multi-select-dropdown.js sets 160px, more than half a phone-wide filter row,
       so the right-hand field ran out of the card */
    min-width: 0 !important;
    height: 36px;
    min-height: 36px;
    padding: 4px 28px 4px 6px !important;
    gap: 6px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--s500-field-border) !important;
    border-radius: 4px;
    background-color: #fff;
    background-image: url('/img/s500/selectarrow.svg');
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 16px 16px;
    font-family: 'Montserrat', Arial, sans-serif;

    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #000;
}

.s500-listing #frm .multiselect-dropdown span.optext {
    padding: 0;
    background: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
}

.s500-listing #frm .sectionfilter_sec table {
    width: 100%;
}

.s500-listing #frm .sectionfilter_sec table td:first-child,
.s500-listing #frm .sectionfilter_sec table td:last-child {
    width: 50%;
}

.s500-listing #frm .sectionfilter_sec table td:nth-child(2) {
    padding: 0 8px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    color: #495057;
    text-align: center;
}

.s500-listing #frm input.product-select {
    width: 100% !important;
    height: 36px;
    margin: 0 !important;
    padding: 4px 12px;
    border: 1px solid var(--s500-field-border) !important;
    border-radius: 4px;
    background-color: #fff;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #000;
}

.s500-listing #frm .sectionfilter_sec label {
    display: flex;
    align-items: center;
    margin: 0;
    cursor: pointer;
}

.s500-listing #frm .sectionfilter_sec label > span {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: #000;
}

.s500-listing #frm .sectionfilter_sec > label input[type="checkbox"] {
    flex: 0 0 12px;
    width: 12px;
    height: 12px;
    margin: 0;
    border: 1px solid #a9a9a9;
    border-radius: 2px;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 8px 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

.s500-listing #frm .sectionfilter_sec > label input[type="checkbox"]:checked {
    border-color: #424242;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M0.6 4.2 3 6.6 7.4 1.4' fill='none' stroke='%23424242' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.s500-listing #frm .sectionfilter_sec:has([name^="typ"]) { grid-column: 1 / -1; grid-row: 1; }
.s500-listing #frm .sectionfilter_sec:has([name^="szerokosc"]) { grid-column: 1 / 3; grid-row: 2; }
.s500-listing #frm .sectionfilter_sec:has([name^="profil"]) { grid-column: 3 / 5; grid-row: 2; }
.s500-listing #frm .sectionfilter_sec:has([name^="srednica"]) { grid-column: 5 / 7; grid-row: 2; }
.s500-listing #frm .sectionfilter_sec:has([name^="sezon"]) { grid-column: 1 / -1; grid-row: 3; }
.s500-listing #frm .sectionfilter_sec:has([name^="producent"]) { grid-column: 1 / 4; grid-row: 4; }
.s500-listing #frm .sectionfilter_sec:has([name^="klasa"]) { grid-column: 4 / 7; grid-row: 4; }
.s500-listing #frm .sectionfilter_sec:has([name^="predkosc"]) { grid-column: 1 / 4; grid-row: 5; }
.s500-listing #frm .sectionfilter_sec:has([name^="nosnosc"]) { grid-column: 4 / 7; grid-row: 5; }
.s500-listing #frm .sectionfilter_sec:has([name^="oszczednosc"]) { grid-column: 1 / 4; grid-row: 6; }
.s500-listing #frm .sectionfilter_sec:has([name^="halas"]) { grid-column: 4 / 7; grid-row: 6; }
.s500-listing #frm .sectionfilter_sec:has([name="price_from"]) { grid-column: 1 / -1; grid-row: 7; }
.s500-listing #frm .s500-fgroup { grid-column: 1 / -1; grid-row: 8; }
.s500-listing #frm .sectionfilter_sec:has([name="4quantity"]) { grid-column: 1 / -1; grid-row: 9; }
.s500-listing #frm .sectionfilter_sec:has([name="par_elektryk"]) { grid-column: 1 / -1; grid-row: 10; }
.s500-listing #frm .sectionfilter_sec:has([name="runflat"]) { grid-column: 1 / -1; grid-row: 11; }
.s500-listing #frm .sectionfilter_sec:has(button[type="submit"]) { grid-column: 1 / -1; grid-row: 12; }

.s500-listing #frm .sectionfilter_sec:has([name="4quantity"]),
.s500-listing #frm .sectionfilter_sec:has([name="par_elektryk"]),
.s500-listing #frm .sectionfilter_sec:has([name="runflat"]) {
    margin-top: calc(8px - var(--s500-field-row-gap));
}

.s500-listing #frm .sectionfilter_sec:has(button[type="submit"]) {
    margin-top: 8px;
}

.s500-listing #frm button[type="submit"].btn {
    top: 0;
    width: 100%;
    padding: 14px 24px;
    border: 0;
    border-radius: 4px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: #000;
    cursor: pointer;
}

/* Moved out of an inline <style> in listing.blade.php. The message is shown by the
   filter validation script, so it has to start hidden. */
.s500-listing #frm .minierr {
    grid-column: 1 / -1;
    display: none;
    margin-top: 7px;
    font-size: 13px;
    font-weight: 700;
    line-height: 15px;
    color: red;
}


@media (max-width: 1030px) {
    .s500-listing {
        grid-template-columns: minmax(0, 1fr);
    }

    .s500-listing > .s500-listing-head {
        display: contents;
    }

    .s500-listing .s500-listing-head__titles {
        grid-column: 1;
        grid-row: 1;
        margin-bottom: var(--s500-block);
    }

    .s500-listing > .sectionfilter {
        grid-column: 1;
        grid-row: 2;
        margin-bottom: var(--s500-col-gap);
    }

    .s500-listing .s500-listing-head > .sectionfilter {
        grid-column: 1;
        grid-row: 3;
        margin-bottom: var(--s500-col-gap);
    }

    .s500-listing > .products {
        grid-column: 1;
        grid-row: 4;
    }
}


/* Filtry na wąskim ekranie, wzorem oponeo: po pierwszym wyszukaniu panel schodzi
   pod przycisk, a strona zaczyna się od wyników. Pasek i nakładka pokazują się
   dopiero, gdy skrypt doda .s500-mf, więc bez JS układ zostaje stary. */
.s500-mfilters {
    display: none;
}

.s500-mfilters__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 48px;
    padding: 0 16px;

    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 4px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #000;
    cursor: pointer;
}

.s500-mfilters__btn::before {
    content: "";
    width: 16px;
    height: 16px;
    background: currentColor;
    -webkit-mask: url('/img/s500/icon-filtry.svg') no-repeat center / contain;
    mask: url('/img/s500/icon-filtry.svg') no-repeat center / contain;
}

.s500-mfilters__licznik {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;

    background: var(--s500-accent-deep);
    border-radius: 11px;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.s500-mfilters__zamknij {
    display: none;
}

@media (max-width: 1030px) {
    /* Przycisk filtrów i sortowanie stają obok siebie, tak jak na oponeo. */
    .s500-listing.s500-mf {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 12px;
    }

    .s500-listing.s500-mf .s500-listing-head__titles {
        grid-column: 1 / -1;
    }

    .s500-listing.s500-mf .s500-mfilters {
        display: block;
        grid-column: 1;
        grid-row: 2;
        margin-bottom: var(--s500-col-gap);
    }

    .s500-listing.s500-mf .s500-listing-head > .sectionfilter {
        grid-column: 2;
        grid-row: 2;
    }

    /* Nad sortowaniem stoi jeszcze etykieta, wiec rownamy dolem i wyrownujemy
       wysokosc pola, zeby oba sterowania konczyly sie w tej samej linii. */
    .s500-listing.s500-mf .s500-mfilters {
        align-self: end;
    }

    .s500-listing.s500-mf .s500-listing-head select.product-select {
        height: 48px;
    }

    .s500-listing.s500-mf > .products {
        grid-column: 1 / -1;
        grid-row: 3;
    }

    /* Panel przestaje być kafelkiem w kolumnie i staje się nakładką na cały ekran,
       więc nie ma już czego przewijać obok wyników. */
    .s500-listing.s500-mf > .sectionfilter {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 1200;

        /* Samo inset: 0 rozciaga panel na cala wysokosc ekranu urzadzenia, wiec
           przyklejony "Szukaj" chowa sie za paskiem przegladarki. dvh liczy to,
           co widac naprawde; vh zostaje dla starszych przegladarek. */
        height: 100vh;
        height: 100dvh;

        grid-column: auto;
        grid-row: auto;
        margin: 0;
        padding: 16px var(--s500-gutter) 0;

        overflow-y: auto;
        overscroll-behavior: contain;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }

    .s500-listing.s500-mf--otwarty > .sectionfilter {
        display: block;
    }

    /* Pelnoekranowe tlo listingu rysuje clip-path, ktory przycinal nakladke do
       wysokosci samego listingu - panel konczyl sie pod naglowkiem strony. Na czas
       otwarcia clip schodzi, bo i tak nie ma go wtedy widac. */
    .s500-listing.s500-mf--otwarty {
        clip-path: none;
        box-shadow: none;
    }

    .s500-listing.s500-mf > .sectionfilter .t1section {
        padding-right: 40px;
        text-align: left;
    }

    .s500-listing.s500-mf > .sectionfilter .s500-mfilters__zamknij {
        display: block;
        position: absolute;
        top: 16px;
        right: var(--s500-gutter);
        width: 32px;
        height: 32px;
        padding: 0;

        background: #000;
        border: 0;
        cursor: pointer;
        -webkit-mask: url('/img/s500/icon-zamknij.svg') no-repeat center / 16px 16px;
        mask: url('/img/s500/icon-zamknij.svg') no-repeat center / 16px 16px;
    }

    /* "Szukaj" zostaje w zasięgu kciuka zamiast uciekać pod całą listę filtrów. */
    .s500-listing.s500-mf > .sectionfilter #frm .sectionfilter_sec:has(button[type="submit"]) {
        position: sticky;
        bottom: 0;
        padding-top: 12px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        background: #fff;

        /* Filtry przewijaja sie pod przyciskiem, wiec bez tej krawedzi tresc po
           prostu urywa sie w polowie wiersza. */
        box-shadow: 0 -8px 12px -8px rgba(0, 0, 0, 0.18);
    }
}

.s500-listing .pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    margin-top: var(--s500-block);
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
    line-height: 22px;
    color: #000;
}

.s500-listing .pagination a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 12px;

    border: 1px solid var(--s500-accent);
    border-radius: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    color: #000;
}

.s500-listing .pagination a:hover {
    text-decoration: none;
}

.s500-listing .pagination a:has(strong) {
    border-color: var(--s500-accent-deep);
    background: var(--s500-accent-deep);
    color: #fff;
}

.s500-listing .pagination a strong {
    font-weight: 400;
    color: #fff;
}

.s500-listing .pagination a:first-child:not(:has(strong)),
.s500-listing .pagination a:last-child:not(:has(strong)) {
    padding: 0 24px;
}

.s500-listing .pagination span {
    color: #495057;
}

.s500-empty {
    padding: var(--s500-block) var(--s500-card-pad);
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: var(--s500-card-radius);
    box-shadow: 6px -3px 25.75px rgba(0, 0, 0, 0.04);
    text-align: center;
}

.s500-empty__title {
    margin-bottom: 8px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: #000;
}

.s500-empty__text {
    margin-bottom: 24px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: #495057;
}

a.s500-empty__action {
    display: inline-block;
    top: 0;
    padding: 14px 24px;
    border: 0;
    border-radius: 4px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
}

a.s500-empty__action:hover,
a.s500-empty__action:focus {
    color: #000;
    text-decoration: none;
}

.s500-promo {
    padding: var(--s500-block) 0;
}

.s500-promo .ct {
    padding: 0 var(--s500-gutter);
}

/* Figma 1854:5016: 1200px, centred, 48px above and below at 1440; from 1024
   down (1854:5171, 5326, 5480) edge to edge, straight under the content */
.s500-promo .swiper {
    width: 100%;
    max-width: 1200px;
}

@media (max-width: 1100px) {
    .s500-shell .s500-promo {
        padding: 0;
    }

    .s500-shell .s500-promo .ct {
        padding: 0;
    }

    .s500-shell .s500-promo .swiper {
        max-width: none;
    }
}

/* strona główna warsztatu: baner na szerokość karty warsztatu nad nim (ten sam
   gutter), na każdej szerokości, zamiast 1200px na desktopie i krawędzi ekranu
   od 1024 w dół */
.s500-home-actions ~ .s500-promo .swiper {
    max-width: none;
}

@media (max-width: 1100px) {
    .s500-shell .s500-home-actions ~ .s500-promo {
        padding: 0 0 48px;
    }

    .s500-shell .s500-home-actions ~ .s500-promo .ct {
        padding: 0 var(--s500-gutter);
    }
}

.s500-promo .swiper-slide img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
}

.s500-promo .bn_m {
    display: none;
}

.s500-promo .swiper-pagination {
    bottom: 24px;
}

.s500-promo .swiper-pagination-bullet {
    width: 18px;
    height: 8px;
    margin: 0 11.5px;
    border-radius: 16px;
    background: #f8f9fa;
    /* the dots sit on the banner, and a light banner swallowed them */
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 1px 4px rgba(0, 0, 0, 0.35);
    opacity: 1;
    transition: width 0.3s ease;
}

.s500-promo .swiper-pagination-bullet-active {
    width: 54px;
}

.s500-promo .swiper-button-prev,
.s500-promo .swiper-button-next {
    display: none;
}

@media (max-width: 800px) {
    .s500-promo .bn_d {
        display: none;
    }

    .s500-promo .bn_m {
        display: block;
    }
}

.newsletter {
    height: auto;
    padding: 88px 0;
    background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)),
                url('/img/s500/newsletter-bg.jpg') center / cover no-repeat;
}

.newsletter .ct {
    display: grid;
    grid-template-columns: 486px minmax(0, 1fr);
    column-gap: 24px;
    align-items: start;
    padding: 0 var(--s500-gutter);
}

.newsletter .t1 {
    grid-column: 1 / -1;
    grid-row: 1;
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    text-align: left;
    text-transform: uppercase;
    color: var(--s500-highlight);
}

.newsletter .t2 {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0 0 24px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 44px;
    text-align: left;
    color: #fff;
}

.newsletter > .ct > p {
    grid-column: 1;
    grid-row: 3;
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    text-align: left;
    color: #fff;
}

.newsletter form {
    grid-column: 2;
    grid-row: 3;
    max-width: none;
    margin: 0;
}

.newsletter .frmn {
    border: 0;
    border-radius: 16px;
}

.newsletter .frmn input[type="email"] {
    flex: 1 1 auto;
    min-width: 0;
    padding: 16px 48px;
    border: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #5c5c5c;
}

.newsletter .frmn input[type="email"]::placeholder {
    color: #5c5c5c;
}

.newsletter .frmn .btn {

    margin: 0;
    border: 0;
    padding: 16px 48px;
    border-radius: 0 16px 16px 0;
    background: var(--s500-highlight);
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #fff;
}

.newsletter form p {
    margin: 24px 0 0;
}

.newsletter form small {
    display: block;
    font-size: 12px;
}

.newsletter form label {
    display: block;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    text-align: left;
    color: #fff;
}

.newsletter form input[type="checkbox"] {
    float: left;
    width: 16px;
    height: 16px;
    margin: 2px 8px 0 0;
    border: 1px solid #fff;
    border-radius: 2px;
    background: transparent no-repeat center / 16px 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

.newsletter form input[type="checkbox"]:checked {
    border-color: transparent;
    background-color: var(--s500-highlight);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 5.2 3.7 8 9 2.2' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-size: 10px 10px;
}

.newsletter form small a {
    display: inline;
    color: #fff;
    text-decoration: underline;
}

@media (max-width: 1030px) {
    .newsletter .ct {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 24px;
    }

    .newsletter > .ct > p,
    .newsletter form {
        grid-column: 1;
    }

    .newsletter > .ct > p { grid-row: 3; }
    .newsletter form { grid-row: 4; }
}

@media (max-width: 800px) {
    .newsletter {
        padding: 48px 0;
    }

    .newsletter .frmn {
        display: block;
    }

    .newsletter .frmn input[type="email"],
    .newsletter .frmn .btn {
        width: 100%;
        padding: 16px 24px;
    }

    .newsletter .frmn .btn {
        border-radius: 0 0 16px 16px;
    }
}

/* Figma 1826:3334 / 1836:3936 / 1836:4073 / 1836:4231: 48px nad i pod, na
   768 i telefonie 32px; 48px miedzy tytulem, kafelkami i karta warsztatu */
.s500-home-actions {
    padding: 48px 0;
    background: #fff;
}

.s500-home-actions .ct {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 0 var(--s500-gutter);
}

.s500-actions {
    display: flex;
    gap: 48px;
    align-items: stretch;
}

/* jeden kafel (drugi moduł wyłączony, S500-33): tej samej szerokości co przy
   dwóch, na środku */
.s500-actions--jedna {
    justify-content: center;
}

.s500-actions--jedna .s500-action {
    flex: 0 1 calc((100% - 48px) / 2);
}

@media (max-width: 600px) {
    .s500-actions--jedna .s500-action {
        flex-basis: auto;
    }
}

.s500-action {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 47px;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 17px;
    box-shadow: 6px -3px 25.75px rgba(0, 0, 0, 0.04);
    text-align: center;
}

.s500-action__img {
    width: 146px;
    height: 124px;
    background-color: var(--s500-accent);
}

.s500-action__img--rezerwacja {
    -webkit-mask: url('/img/s500/ilu-rezerwacja.png') no-repeat center / contain;
    mask: url('/img/s500/ilu-rezerwacja.png') no-repeat center / contain;
}

.s500-action__img--sklep {
    -webkit-mask: url('/img/s500/ilu-sklep.png') no-repeat center / contain;
    mask: url('/img/s500/ilu-sklep.png') no-repeat center / contain;
}

.s500-action__title {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: #000;
}

.s500-action__text {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
}

.s500-action__btn {
    display: inline-block;
    padding: 14px 24px;
    border-radius: 12px;
    background: var(--s500-accent-soft);
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
}

/* Bootstrap has a:hover{color:#0a58ca}. A rule that sets only text-decoration
   loses the colour fight, because a:hover (0,1,1) beats a bare class (0,1,0), so
   every anchor-shaped button has to restate its own colour here. */
.s500-action__btn:hover,
.s500-action__btn:focus {
    color: #000;
    text-decoration: none;
}

.s500-workshop {
    padding: 32px;
    background: var(--s500-page-bg);
    border-radius: 32px;
}

.s500-workshop__head {
    display: flex;
    gap: 48px;
    align-items: center;
}

.s500-workshop__id {
    display: flex;
    gap: 24px;
    align-items: center;
}

.s500-workshop__photo {
    position: relative;
    display: flex;
    flex: 0 0 112px;
    align-items: center;
    justify-content: center;
    width: 112px;
    height: 112px;
    border-radius: 50%;
    background: #e3e3e3;
    overflow: hidden;
}

.s500-workshop__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.s500-workshop__initials {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 32px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 1px;
    color: #495057;
}

.s500-workshop__about {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s500-workshop__name {
    width: 330px;
    max-width: 100%;
    margin-bottom: 4px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: #000;
}

.s500-workshop__addr,
.s500-contact-list li,
.s500-workshop__fb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
}

.s500-workshop__addr::before,
.s500-contact-list--tel li::before,
.s500-contact-list--mail li::before,
.s500-workshop__fb::before {
    content: '';
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.s500-workshop__addr::before { background-image: url('/img/s500/icon-geo.svg'); }
.s500-contact-list--tel li::before { background-image: url('/img/s500/icon-tel.svg'); }
.s500-contact-list--mail li::before { background-image: url('/img/s500/icon-mail.svg'); }
.s500-workshop__fb::before { background-image: url('/img/s500/icon-facebook.svg'); }

.s500-workshop__route {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: normal;
    color: #000;
    text-decoration: underline;
}

.s500-workshop__route::before {
    content: '';
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border: 1px solid #000;
    border-radius: 5px;
    background: url('/img/s500/icon-trasa.svg') no-repeat center / 10px 10px;
}

.s500-workshop__contact {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 20px;
}

.s500-workshop__cols {
    display: flex;
    gap: 24px;
}

.s500-contact-list {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.s500-contact-list a,
.s500-workshop__fb {
    color: #000;
}

.s500-workshop__social {
    padding-top: 20px;
    border-top: 1px solid #c4c4c4;
}

.s500-prices {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 32px;
}

.s500-prices__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 8px;
    background: #e3e3e3;
    border-radius: 4px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
    cursor: pointer;
    list-style: none;
}

.s500-prices__head::-webkit-details-marker {
    display: none;
}

.s500-prices__head::after {
    content: '';
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    background: url('/img/s500/icon-chevron.svg') no-repeat center / contain;
    transition: transform 0.2s ease;
}

.s500-prices[open] .s500-prices__head::after {
    transform: rotate(180deg);
}

.s500-prices__list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 12px 0 0;
    list-style: none;
}

.s500-accordion__wrap {
    overflow: hidden;
    transition: height 0.25s ease;
}

.s500-prices__list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 8px 0;
    border-bottom: 1px solid #cacaca;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
}

/* karta warsztatu na wizytowce (ta sama karta w kolumnie rezerwacji ma swoj
   uklad w .s500-book__side): zdjecie i nazwa obok kontaktow z odstepem 24, od
   768 kontakty pod spodem; telefony i maile zawsze w dwoch kolumnach, wiersze
   co 8px, kreska i Facebook co 12px; nazwa 12px nad adresem, trasa tuz pod
   nim */
.s500-home-actions .s500-workshop__head {
    gap: 24px;
}

.s500-home-actions .s500-workshop__about {
    gap: 0;
}

.s500-home-actions .s500-workshop__name {
    margin-bottom: 12px;
}

.s500-home-actions .s500-workshop__contact {
    gap: 12px;
}

.s500-home-actions .s500-contact-list {
    gap: 8px;
}

.s500-home-actions .s500-workshop__social {
    padding-top: 12px;
}

@media (max-width: 1030px) {
    .s500-workshop__head {
        flex-direction: column;
        align-items: flex-start;
    }

    .s500-workshop__contact {
        width: 100%;
    }

    .s500-home-actions .s500-workshop__head {
        flex-direction: row;
        align-items: center;
    }

    .s500-home-actions .s500-workshop__contact {
        width: auto;
    }
}

@media (max-width: 900px) {
    .s500-home-actions .s500-workshop__head {
        flex-direction: column;
        align-items: stretch;
    }

    .s500-home-actions .s500-workshop__contact {
        width: 100%;
    }
}

@media (max-width: 800px) {
    .s500-home-actions {
        padding: 32px 0;
    }

    .s500-workshop {
        padding: 20px;
        border-radius: 20px;
    }

    .s500-workshop__id {
        flex-direction: column;
        align-items: flex-start;
    }

    .s500-workshop__cols {
        flex-direction: column;
        gap: 8px;
    }

    .s500-prices__list li {
        align-items: flex-start;
        gap: 12px;
    }

    .s500-home-actions .s500-workshop {
        padding: 32px;
        border-radius: 32px;
    }

    .s500-home-actions .s500-workshop__id {
        flex-direction: row;
        align-items: center;
    }

    .s500-home-actions .s500-workshop__cols {
        flex-direction: row;
        gap: 24px;
    }
}

/* telefon (1836:4231): kafelki jeden pod drugim, wszystko co 24px */
@media (max-width: 600px) {
    .s500-home-actions .ct {
        gap: 24px;
    }

    .s500-actions {
        flex-direction: column;
        gap: 24px;
    }
}

/* --------------------------------------------------------------------------
   Karta produktu (Figma 1888:14504 / 1888:19246 przy 1440, 1889:20140 /
   20342 przy 1024, 1889:21304 / 21509 przy 768, 1889:23704 / 23905 przy 530)
   -------------------------------------------------------------------------- */
.s500-product {
    padding: 48px 0;
    background: #fff;
}

.s500-product .ct {
    padding: 0 var(--s500-gutter);
}

.s500-product__titles {
    margin-bottom: 6px;
}

.s500-product__brand {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 44px;
    color: #000;
}

.s500-product__model {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 44px;
    color: #000;
}

/* zdjecie 488x284, obok parametry (272) i box zakupu (334); calosc 1239px
   wysrodkowana w 1272, stad 16.5px z bokow. Przy 1024 zdjecie sie zweza. */
.s500-product__main {
    display: flex;
    align-items: flex-start;
    gap: 32px;
    padding: 0 16.5px;
}

.s500-product__photo {
    flex: 0 1 488px;
    min-width: 0;
    height: 284px;
}

.s500-product__photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.s500-product__specs {
    display: flex;
    flex: 1 0 272px;
    min-width: 0;
    flex-direction: column;
    gap: 12px;
}

.s500-product__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Figma rysuje ramke do srodka: 28px wysokosci razem z ramka */
.s500-product__tags .s500-tag {
    padding: 1px 3px;
    font-size: 14px;
}

.s500-product__eu-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.s500-product__eu-row .s500-chip {
    padding: 1px 3px;
    font-size: 20px;
}

.s500-product__label {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #000;
}

.s500-product__row {
    display: flex;
    align-items: center;
    gap: 11px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
}

.s500-product__row .s500-product__label {
    margin-right: -7px;
}

.s500-product__season-icon {
    width: 24px;
    height: 24px;
}

.s500-product__buy {
    display: flex;
    flex: 0 0 334px;
    width: 334px;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    padding: 31px;
    background: #fff;
    border: 1px solid #dbdbdb;
    border-radius: 4px;
    box-shadow: 9px 6px 8.15px rgba(0, 0, 0, 0.07);
}

/* "557 zl" 51px wysokie, "/szt." przy dolnej krawedzi, jak w ramce */
.s500-product__price {
    display: flex;
    flex-wrap: nowrap;
    align-items: flex-end;
    gap: 2px;
    color: #000;
}

.s500-product__price strong,
.s500-product__price span {
    white-space: nowrap;
}

.s500-product__price strong {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 71px;
    font-weight: 700;
    line-height: 51px;
}

.s500-product__price--long strong {
    font-size: 48px;
    line-height: 40px;
}

.s500-product__price span {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 22px;
}

/* 1024 (1889:20140): bez marginesow z bokow, zdjecie bierze reszte miejsca */
@media (max-width: 1100px) {
    .s500-product__main {
        padding: 0;
    }
}

/* 768 (1889:21304): zdjecie 284 wysokie na srodku, pod nim parametry i box
   obok siebie (645px na srodku) */
@media (max-width: 1000px) {
    .s500-product__main {
        flex-wrap: wrap;
        justify-content: space-between;
        padding: 0 13.5px;
    }

    .s500-product__photo {
        flex: 0 0 calc(100% + 27px);
        margin: 0 -13.5px;
    }

    .s500-product__specs {
        flex: 0 0 272px;
    }
}

/* 530 (1889:23704): parametry, pod nimi box na cala szerokosc */
@media (max-width: 735px) {
    .s500-product__main {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: stretch;
        gap: 12px;
        padding: 0;
    }

    .s500-product__photo {
        flex: none;
        margin: 0 0 20px;
    }

    .s500-product__specs {
        flex: none;
    }

    .s500-product__buy {
        flex: none;
        width: 100%;
    }
}

/* --- Jak czytac etykiety opon? ---
   Rozwiniety: etykieta obok tekstu, nagłówek nad tekstem, nie nad etykieta,
   a na telefonie pod nia; dlatego to nie jest <details> (tam nagłówek musi byc
   pierwszy), tylko przycisk z aria-expanded. Zwiniety: sam pasek 72px.
   Cztery uklady z ramek:
   1440: etykieta 361 wysrodkowana obok kolumny (nagłówek, opis, 3 kolumny)
   1024: trzy rowne kolumny, etykieta w pierwszej, dwie pierwsze karty obok
         niej, trzy pod spodem
   768:  etykieta 361 obok nagłówka z opisem (wysrodkowanych), karty po dwie
   530:  etykieta, nagłówek, opis, karty po dwie */
.s500-eu {
    margin-top: 48px;
    padding: 24px;
    background: var(--s500-page-bg);
    border-radius: 4px;
}

.s500-eu__body {
    display: grid;
    grid-template-columns: 361px minmax(0, 1fr);
    gap: 18px;
}

.s500-eu__label {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: center;
    width: 100%;
    height: auto;
}

.s500-eu__text {
    display: flex;
    grid-column: 2;
    grid-row: 1;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}

.s500-eu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3px;
    width: 100%;
    padding: 0 8px;
    border: 0;
    background: none;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #000;
    text-align: left;
    cursor: pointer;
}

.s500-eu__head::after {
    content: '';
    flex: 0 0 13px;
    width: 13px;
    height: 7px;
    background: url('/img/s500/icon-chevron-eu.svg') no-repeat center / 13px 7px;
    transition: transform 0.2s ease;
}

.s500-eu--open .s500-eu__head::after {
    transform: scaleY(-1);
}

.s500-eu__intro p {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 15px;
    color: #000;
}

.s500-eu__grid {
    display: grid;
    grid-column: 2;
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.s500-eu__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.s500-eu__item img {
    width: 111px;
    height: 84px;
    object-fit: contain;
}

.s500-eu__item h3 {
    width: 100%;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #000;
}

.s500-eu__item p {
    width: 100%;
    margin-top: -6px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    color: #000;
}

/* zwiniety: sam nagłówek na cala szerokosc */
.s500-eu:not(.s500-eu--open) .s500-eu__label,
.s500-eu:not(.s500-eu--open) .s500-eu__intro,
.s500-eu:not(.s500-eu--open) .s500-eu__grid,
.s500-eu:not(.s500-eu--open) .s500-eu__item {
    display: none;
}

.s500-eu:not(.s500-eu--open) .s500-eu__text {
    grid-column: 1 / -1;
    grid-row: 1;
    align-self: stretch;
}

.s500-eu--wjazd .s500-eu__label,
.s500-eu--wjazd .s500-eu__intro,
.s500-eu--wjazd .s500-eu__item {
    animation: s500-eu-wjazd 0.25s ease;
}

@keyframes s500-eu-wjazd {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 1024 */
@media (max-width: 1199px) {
    .s500-eu__body {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .s500-eu__label {
        grid-row: 1 / 3;
        align-self: start;
    }

    .s500-eu__text {
        grid-column: 2 / 4;
    }

    .s500-eu__grid {
        display: contents;
    }
}

/* 768 */
@media (max-width: 900px) {
    .s500-eu__body {
        grid-template-columns: minmax(0, 303fr) minmax(0, 40fr) minmax(0, 245fr);
    }

    .s500-eu__label {
        grid-column: 1 / 3;
        grid-row: 1;
    }

    .s500-eu__text {
        grid-column: 3;
        align-self: center;
    }

    .s500-eu__item:nth-child(odd) {
        grid-column: 1;
    }

    .s500-eu__item:nth-child(even) {
        grid-column: 2 / 4;
    }
}

/* 530 */
@media (max-width: 700px) {
    .s500-eu__body {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .s500-eu__label,
    .s500-eu__text {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .s500-eu__item:nth-child(odd),
    .s500-eu__item:nth-child(even) {
        grid-column: auto;
    }
}

/* koszyk na telefonie wezszym niz ramka: obok zdjecia zostaje ~140px, a marka
   24px (np. GOODYEAR) wchodzila pod krzyzyk usuwania */
@media (max-width: 480px) {
    .s500-cartitem__brand {
        font-size: 18px;
        line-height: 26px;
        overflow-wrap: anywhere;
    }
}

/* ponizej ramki 530 dwie kolumny po ~140px lamaly naglowki slowo po slowie */
@media (max-width: 480px) {
    .s500-eu__body {
        grid-template-columns: minmax(0, 1fr);
    }
}

.s500-similar {
    padding: 48px 0;
    background: var(--s500-page-bg);
}

.s500-similar .ct {
    padding: 0 var(--s500-gutter);
}

.s500-similar .s500-section-head {
    margin-bottom: 32px;
}

.s500-similar .s500-section-head__kicker {
    font-size: 20px;
    line-height: 25px;
}

.s500-similar .s500-section-head__title {
    font-size: 24px;
    line-height: 32px;
}

@media (max-width: 800px) {
    .s500-similar .s500-section-head {
        margin-bottom: 24px;
    }
}

.s500-breadcrumbs span::first-letter,
.s500-listing span::first-letter,
.s500-listing label::first-letter,
.s500-card span::first-letter,
.s500-cart span::first-letter,
.s500-order span::first-letter,
.s500-summary-page span::first-letter,
.s500-order label::first-letter,
.s500-product span::first-letter,
.s500-similar span::first-letter,
.s500-home-actions span::first-letter,
.s500-home-actions label::first-letter,
.newsletter span::first-letter,
.newsletter label::first-letter {
    text-transform: none;
}

/* The gutter belongs to .ct, not to the section around it. On a section it eats
   into the width the centred .ct is then centred in, which lands the content one
   gutter left of the breadcrumb above it - the page frame is the breadcrumb's
   1200px box, so every screen has to sit inside the same one. */
/* Figma 1858:20436 / 20663 / 21124: 48px above the title, under the content and
   between the two, at every width */
.s500-cart {
    padding: 48px 0;
    background: var(--s500-page-bg);

    box-shadow: 0 0 0 100vmax var(--s500-page-bg);
    clip-path: inset(0 -100vmax);
}

.s500-cart > .ct {
    padding-left: var(--s500-gutter);
    padding-right: var(--s500-gutter);
}

.s500-cart__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 48px;
}

.s500-cart__title {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 56px;
    letter-spacing: 0;
    color: #000;
}

.s500-steps {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    max-width: 679px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.s500-steps__step {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    white-space: nowrap;
    color: #a8a8a8;
}

.s500-steps__no {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #a8a8a8;
    font-size: 14px;
    line-height: 1;
    color: #fff;
}

/* Biezacy krok znaczymy marka, nie kolorem fokusa. Kolko jest wtedy zolte,
   wiec cyfra musi zejsc z bieli na czarne, bo bialy na zoltym nie jest do
   odczytania. */
.s500-steps__step--on {
    color: #000;
}

.s500-steps__step--on .s500-steps__no {
    background: var(--s500-accent);
    color: #000;
}

.s500-steps__line {
    flex: 1 1 0;
    min-width: 16px;
    height: 0;
    border-top: 1px solid #a8a8a8;
}

.s500-cart__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 366px;
    column-gap: var(--s500-col-gap);
    align-items: start;
}

.s500-cart__grid.is-loading {
    opacity: 0.5;
    pointer-events: none;
}

.s500-cart__main {
    display: flex;
    flex-direction: column;
    gap: var(--s500-col-gap);
    min-width: 0;
}

.s500-cart__aside {
    position: sticky;
    top: 16px;
}

/* One tyre together with its own services forms a group. The divider is drawn
   BETWEEN groups, never between a tyre and its services - that was the original
   layout and it read as if the services belonged to the next tyre. */
.s500-cartgroup {
    display: flex;
    flex-direction: column;
    gap: var(--s500-col-gap);
    min-width: 0;
}

.s500-cartgroup + .s500-cartgroup {
    margin-top: var(--s500-col-gap);
    padding-top: var(--s500-block);
    border-top: 1px solid #d9d9d9;
}

/* the frames draw a line between the tyre and "Usługi" */
.s500-cart__services-title {
    margin-top: 0;
    padding-top: 24px;
    border-top: 1px solid #a8a8a8;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: #000;
}

.s500-cart__remove {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.s500-cart__remove::before,
.s500-cart__remove::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 1.5px;
    border-radius: 1px;
    background: #bfbfbf;
}

.s500-cart__remove::before { transform: translate(-50%, -50%) rotate(45deg); }
.s500-cart__remove::after { transform: translate(-50%, -50%) rotate(-45deg); }

.s500-cart__remove:hover::before,
.s500-cart__remove:hover::after { background: #000; }

select.s500-cart-select {
    flex: 0 0 auto;
    height: 50px;
    padding: 0 40px 0 16px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--s500-field-border) !important;
    border-radius: 4px;
    background-color: #fff;
    background-image: url('/img/s500/selectarrow.svg');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: #000;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

select.s500-cart-select[hidden] {
    display: none;
}

.s500-cart-price {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-family: 'Montserrat', Arial, sans-serif;
}

.s500-cart-price span,
.s500-cart-price strong {
    white-space: nowrap;
}

.s500-cart-price--unit span {
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: #bebebe;
}

.s500-cart-price--unit strong {
    font-size: 18px;
    font-weight: 600;
    line-height: 24px;
    color: #bebebe;
}

.s500-cart-price--sum span {
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #000;
}

.s500-cart-price--sum strong {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: #000;
}

.s500-cartitem {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px 24px;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: var(--s500-card-radius);
    box-shadow: 6px -3px 25.75px rgba(0, 0, 0, 0.04);
}

.s500-cartitem__photo {
    flex: 0 0 116px;
    width: 116px;
}

.s500-cartitem__photo img {
    display: block;
    width: 100%;
    height: 130px;
    object-fit: contain;
}

.s500-cartitem__info {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.s500-cartitem__titles {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.s500-cartitem__brand {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: #000;
}

.s500-cartitem__model {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #000;
}

.s500-cartitem__params {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.s500-cartitem__prices {
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 8px;
}

.s500-cartitem__prices .s500-cart-price--sum span {
    font-size: 20px;
    line-height: 28px;
}

.s500-cartitem__prices .s500-cart-price--sum strong {
    font-size: 32px;
    line-height: 40px;
}

.s500-cartservice {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--s500-panel-pad);
    background: #fff;
    border-radius: var(--s500-card-radius);
}

.s500-cartservice__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;

    padding-right: 28px;
}

.s500-cartservice__title {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #000;
}

.s500-cartservice__desc {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: #555;
}

.s500-cartservice__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.s500-cartservice__pick {
    flex: 0 0 auto;
    min-width: 161px;
}

.s500-cartservice .s500-cart-price--unit span {
    font-weight: 600;
}

.s500-cartservice .s500-cart-price--unit strong {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}

.s500-cartservice--off .s500-cart-price--sum span,
.s500-cartservice--off .s500-cart-price--sum strong {
    color: #bebebe;
}

.s500-cartservice--off .s500-cartservice__head {
    padding-right: 92px;
}

.s500-cartservice__add {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 4px 14px;
    border: 1px solid var(--s500-accent);
    border-radius: 4px;
    background: none;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #000;
    cursor: pointer;
}

.s500-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px;
    background: #fff;
    border-radius: var(--s500-card-radius);
}

.s500-summary__title {
    padding: 10px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    color: #000;
}

.s500-summary__list {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid #a8a8a8;
    border-bottom: 1px solid #a8a8a8;
}

.s500-summary__list li,
.s500-summary__total {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    padding: 10px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #000;
}

.s500-summary__list li span,
.s500-summary__total span {
    font-weight: 400;
}

.s500-summary__list li strong,
.s500-summary__total strong {
    font-weight: 600;
    white-space: nowrap;
}

.s500-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 24px;
    border-radius: 12px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    color: #000;
    cursor: pointer;
}

.s500-btn:hover {
    text-decoration: none;
    color: #000;
}

.s500-btn--solid {
    border: 0;
    background: var(--s500-accent-soft);
}

.s500-summary .s500-btn--solid {
    width: 100%;
}

.s500-btn--ghost {
    align-self: flex-start;
    min-width: 268px;
    padding: 13px 23px;
    border: 1px solid var(--s500-accent);
    background: none;
}

.s500-cart__back {
    margin-top: var(--s500-block);
}

.s500-cart__empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: var(--s500-card-pad);
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: var(--s500-card-radius);
}

.s500-cart__empty-title {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: #000;
}

.s500-cart__empty-text {
    margin-bottom: 8px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
}

@media (max-width: 1200px) {
    .s500-cart__grid {
        grid-template-columns: minmax(0, 1fr);
        row-gap: var(--s500-col-gap);
    }

    .s500-cart__aside {
        position: static;
    }
}

/* Compact steps (Figma 1858:21124): only the current step keeps its name, the
   others are numbers on the line. On a phone always; the booking's longer names
   (--wide) need it already below 900px, where they no longer fit one row. The
   name stays for screen readers. */
@media (max-width: 900px) {
    .s500-steps--wide .s500-steps__step:not(.s500-steps__step--on) .s500-steps__name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

@media (max-width: 900px) {
    .s500-cartitem {
        flex-wrap: wrap;
    }

    .s500-cartitem__info {
        flex: 1 1 240px;
    }

    .s500-cartitem__prices {
        flex: 1 1 100%;
        flex-direction: row;
        justify-content: space-between;
    }

    .s500-cartservice__row {
        gap: 12px;
    }

    .s500-cartservice__pick {
        min-width: 0;
        flex: 1 1 100%;
    }

}

@media (max-width: 600px) {
    .s500-steps__step:not(.s500-steps__step--on) .s500-steps__name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    /* phone (Figma 1858:21124): photo beside the name, under them the count,
       the unit price and the sum in one row */
    .s500-cartitem {
        display: grid;
        grid-template-columns: 116px minmax(0, 1fr);
        grid-template-areas:
            "photo info"
            "qty   prices";
        align-items: center;
        gap: 16px 24px;
        padding: 16px;
    }

    .s500-cartitem__photo { grid-area: photo; }
    /* miejsce na krzyzyk usuwania, ktory wisi w prawym gornym rogu */
    .s500-cartitem__info { grid-area: info; min-width: 0; padding-right: 20px; }
    .s500-cartitem > .s500-cart-select { grid-area: qty; }

    /* min-width 0 i zawijanie: cena jednostkowa i suma (ok. 290px) nie mieszcza
       sie obok pola ilosci ponizej ~520px i wyplywaly na nie w lewo */
    .s500-cartitem__prices {
        grid-area: prices;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-end;
        justify-content: flex-end;
        gap: 4px 8px;
        min-width: 0;
        text-align: right;
    }

    /* the service: variant, then unit price and sum side by side from the left */
    .s500-cartservice__row {
        display: grid;
        grid-template-columns: auto auto;
        grid-template-areas:
            "pick pick"
            "unit sum";
        justify-content: start;
        align-items: start;
        gap: 24px;
    }

    .s500-cartservice__pick {
        grid-area: pick;
        flex: none;
        min-width: 161px;
    }

    .s500-cartservice__row .s500-cart-price--unit { grid-area: unit; }
    .s500-cartservice__row .s500-cart-price--sum { grid-area: sum; }
}

.s500-order {
    padding: var(--s500-block) 0;
    background: var(--s500-page-bg);
    box-shadow: 0 0 0 100vmax var(--s500-page-bg);
    clip-path: inset(0 -100vmax);
}

.s500-order > .ct {
    padding-left: var(--s500-gutter);
    padding-right: var(--s500-gutter);
}

.s500-order__form {
    display: flex;
    flex-direction: column;
    gap: var(--s500-col-gap);
}

.s500-order__row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s500-col-gap);
    align-items: start;
}

.s500-order__side {
    display: flex;
    flex-direction: column;
    gap: var(--s500-col-gap);
}

.s500-order__submit {
    width: 100%;
    margin: 0;
}

.s500-order__back {
    margin-top: var(--s500-block);
}

/* Figma 1861:8367: 16px inside, 16px corners, at every width */
.s500-panel {
    display: flex;
    flex-direction: column;
    gap: var(--s500-col-gap);
    margin: 0;
    padding: 16px;
    background: #fff;
    border-radius: 16px;
}

.s500-panel__head {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    color: #000;
}

.s500-panel--tight {
    gap: 4px;
}

.s500-panel--tight .s500-panel__head {
    padding: 10px 0;
    border-bottom: 1px solid #a8a8a8;
}

.s500-panel--tight .s500-checkrow {
    padding: 10px 0;
}

.s500-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s500-col-gap);
}

.s500-fields[hidden] {
    display: none;
}

/* relative, so the validation message can hang below the field instead of being
   part of the column: inserting it into the flow made the whole card grow and
   shrink on every keystroke */
.s500-field {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

/* Label/Label-small in the frames: 12/20 */
.s500-field__label {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #000;
}

.s500-field__input,
.s500-textarea {
    width: 100%;
    padding: 0 12px;
    border: 1px solid #c4c4c4 !important;
    border-radius: 8px;
    background: #fff;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
}

.s500-field__input {
    height: 40px;
}

.s500-field__input:focus,
.s500-textarea:focus {
    outline: 2px solid var(--s500-focus);
    outline-offset: -2px;
}

.s500-field__group {
    display: flex;
    align-items: stretch;
    gap: 4px;
    min-width: 0;
}

.s500-field__prefix {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    padding: 0 12px;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    background: #e4e4e4;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
}

.s500-textarea {
    min-height: 70px;
    padding: 8px 12px;
    line-height: 28px;
    resize: vertical;
}

.s500-textarea::placeholder {
    color: #8a8a8a;
    opacity: 1;
}

.s500-checkrow {
    display: flex;
    align-items: center;
    gap: 8px;
}

.s500-checkrow label {
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
    cursor: pointer;
}

.s500-checkrow--long p {
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
}

.s500-checkrow--long label {
    display: inline;
}

.s500-checkrow__more {
    white-space: nowrap;
}

/* the consent's own "Czytaj więcej": a button that looks like the links beside it */
.s500-rozwin {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: #000;
    text-decoration: underline;
    cursor: pointer;
}

.s500-rozwin:focus-visible {
    outline: 2px solid var(--s500-focus);
    outline-offset: 2px;
}

/* opened, the clause makes the row tall; the box stays by the consent's first line */
.s500-checkrow--long:has(.s500-checkrow__tresc:not([hidden])) > .s500-check {
    align-self: flex-start;
    margin-top: 4px;
}

.s500-checkrow__tresc {
    margin-top: 8px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 13px;
    line-height: 20px;
    color: #555;
}

.s500-checkrow__tresc p {
    margin: 0 0 6px;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

.s500-checkrow__tresc p:last-child {
    margin-bottom: 0;
}

.s500-checkrow--long a {
    color: #000;
    text-decoration: underline;
}

input.s500-check {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin: 0;
    border: 1px solid #c4c4c4 !important;
    border-radius: 2px;
    background: #fff no-repeat center / 10px 10px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
}

input.s500-check:checked {
    border-color: transparent !important;
    background-color: var(--s500-focus);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 5.2 3.7 8 9 2.2' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

input.s500-check:focus-visible {
    outline: 2px solid var(--s500-focus);
    outline-offset: 2px;
}

.s500-steps__step--done {
    color: #24d900;
}

.s500-steps__step--done .s500-steps__no {
    background: #24d900;
}

@media (max-width: 1100px) {
    .s500-order__row {
        grid-template-columns: minmax(0, 1fr);
    }

    .s500-order__side {
        justify-content: flex-start;
    }
}

/* two fields a row down to the 530 frame (1861:8768); a phone narrower than
   that gets one */
@media (max-width: 480px) {
    .s500-fields {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* order (1861:8634, 1861:8768): 24px from the steps to the first panel from 768
   down, 48 above that */
@media (max-width: 800px) {
    .s500-order .s500-cart__head {
        margin-bottom: 24px;
    }
}

.s500-summary-page {
    padding: var(--s500-block) 0;
    background: #fff;
}

.s500-summary-page > .ct {
    padding-left: var(--s500-gutter);
    padding-right: var(--s500-gutter);
}

.s500-summary-page__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 423px;
    gap: 48px;
    align-items: start;
}

.s500-summary-page__main,
.s500-summary-page__side {
    display: flex;
    flex-direction: column;
    gap: var(--s500-col-gap);
    min-width: 0;
}

/* the product cards follow the width of the main column, not the screen: at
   1024 it is beside the side column and as narrow as a phone (Figma 1864:8668) */
.s500-summary-page__main {
    container: s500-podsum / inline-size;
}

/* the side column is one grey card, like the workshop card beside the calendar */
.s500-summary-page__side {
    padding: var(--s500-panel-pad);
    background: #f6f6f6;
    border-radius: var(--s500-card-radius);
}

/* Figma 1864:8550 / 8668 / 8787: the order button sits on the left under the
   summary, at its own width; on a phone (1864:8906) it is centred */
.s500-summary-page__form {
    display: flex;
    justify-content: flex-start;
    margin-top: var(--s500-block);
}

@media (max-width: 600px) {
    .s500-summary-page__form {
        justify-content: center;
    }
}

.s500-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.s500-block__head {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 29px;
    color: #000;
}

.s500-plain {
    padding: 16px;
    border-radius: var(--s500-card-radius);
    background: #fff;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #000;
}

.s500-plain--rows {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.s500-plain p {
    margin: 0;
}

.s500-plain__name {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

/* Same grouping as in cart step 1: one tyre with its own services forms a group
   and the divider goes BETWEEN groups. .s500-block lays its children out with a
   16px gap, so the group repeats that gap internally to keep the rhythm. */
.s500-sumgroup {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.s500-sumgroup + .s500-sumgroup {
    margin-top: var(--s500-col-gap);
    padding-top: var(--s500-block);
    border-top: 1px solid #d9d9d9;
}

.s500-sumitem {
    display: flex;
    align-items: center;
    gap: var(--s500-col-gap);
    padding: var(--s500-card-pad);
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: var(--s500-card-radius);
    box-shadow: 6px -3px 25.75px rgba(0, 0, 0, 0.04);
}

.s500-sumitem__photo {
    flex: 0 0 116px;
    width: 116px;
}

.s500-sumitem__photo img {
    display: block;
    width: 100%;
    height: 130px;
    object-fit: contain;
}

.s500-sumitem__info {
    display: flex;
    flex: 0 1 auto;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.s500-sumitem__prices {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s500-col-gap);
}

.s500-sumitem__prices .s500-cart-price--sum span {
    font-size: 20px;
    line-height: 28px;
}

.s500-sumitem__prices .s500-cart-price--sum strong {
    font-size: 32px;
    line-height: 40px;
}

.s500-sumservice {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: var(--s500-card-pad);
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: var(--s500-card-radius);
    box-shadow: 6px -3px 25.75px rgba(0, 0, 0, 0.04);
}

.s500-sumservice__title {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #000;
}

.s500-sumservice__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s500-col-gap);
    flex-wrap: wrap;
}

.s500-sumservice__detail {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #000;
}

.s500-sumservice__prices {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--s500-col-gap);
}

.s500-sumservice__prices .s500-cart-price {
    gap: 8px;
}

.s500-sumservice__prices .s500-cart-price--unit span,
.s500-sumservice__prices .s500-cart-price--sum span {
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
}

.s500-sumservice__prices .s500-cart-price--unit span,
.s500-sumservice__prices .s500-cart-price--unit strong {
    color: #c0c0c0;
}

.s500-sumservice__prices .s500-cart-price--unit strong,
.s500-sumservice__prices .s500-cart-price--sum strong {
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}

.s500-total {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: var(--s500-card-radius);
    box-shadow: 6px -3px 25.75px rgba(0, 0, 0, 0.04);
}

.s500-total__res-label {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #000;
}

.s500-total__res-date {
    padding: 8px 16px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #000;
}

.s500-total__row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 20px;
    line-height: 28px;
    color: #000;
}

.s500-total__row span {
    font-weight: 400;
}

.s500-total__row strong {
    font-weight: 700;
    white-space: nowrap;
}

.s500-point {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.s500-point__name {
    font-weight: 600;
}

.s500-point__addr,
.s500-point__list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
}

.s500-point__addr::before,
.s500-point__list li::before {
    content: '';
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.s500-point__addr::before { background-image: url('/img/s500/icon-geo.svg'); }
.s500-point__list--tel li::before { background-image: url('/img/s500/icon-tel.svg'); }
.s500-point__list--mail li::before { background-image: url('/img/s500/icon-mail.svg'); }

.s500-point__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.s500-point__list a {
    color: #000;
}

/* Figma 1864:8668: at 1024 both columns stay, the side one narrower (347px);
   from 768 (1864:8787) one column */
@media (max-width: 1200px) {
    .s500-summary-page__grid {
        grid-template-columns: minmax(0, 1fr) 347px;
    }
}

@media (max-width: 900px) {
    .s500-summary-page__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s500-block);
    }
}

/* prices under the tyre once the card is narrow; the workshop shell gives the
   main column only 729px at 1440 (1200px content), where they squeezed the name
   into a 120px strip */
@container s500-podsum (max-width: 780px) {
    .s500-sumitem {
        flex-wrap: wrap;
    }

    .s500-sumitem__info {
        flex: 1 1 220px;
    }

    .s500-sumitem__prices {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    .s500-sumitem__prices .s500-cart-price--sum span {
        white-space: normal;
    }
}

@media (max-width: 800px) {
    .s500-summary-page .s500-cart__head {
        margin-bottom: 24px;
    }
}

/* phone (Figma 1864:8906): the tyre keeps the unit price on the left and the
   sum on the right in one row; a service puts the variant above and both
   prices beside each other from the left; the same at 1024 beside the side
   column (1864:8668) */
@container s500-podsum (max-width: 560px) {
    .s500-sumitem__prices {
        align-items: flex-end;
    }

    .s500-sumservice__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .s500-sumservice__prices {
        justify-content: flex-start;
        gap: 24px;
    }
}

.s500-reservation {
    padding: var(--s500-block) 0;
    background: var(--s500-page-bg);
    box-shadow: 0 0 0 100vmax var(--s500-page-bg);
    clip-path: inset(0 -100vmax);
}

.s500-reservation > .ct {
    padding-left: var(--s500-gutter);
    padding-right: var(--s500-gutter);
}

.s500-hosted .mzheader,
.s500-hosted .reservation-title {
    display: none !important;
}

.s500-hosted,
.s500-hosted > .mzproducts_bg,
.s500-hosted #mzfrm,
.s500-hosted .mzproducts,
.s500-hosted .mzorder,
.s500-hosted #reservationaj,
.s500-hosted #reservationaj > .mzproducts_bg {
    max-width: none;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
}

.s500-hosted .Order_Reservation {
    display: flex;
    flex-direction: column;
    gap: var(--s500-col-gap);
    padding: var(--s500-card-pad);
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: var(--s500-card-radius);
    box-shadow: 6px -3px 25.75px rgba(0, 0, 0, 0.04);
    font-family: 'Montserrat', Arial, sans-serif;
}

.s500-hosted #frm_reservation {
    display: flex;
    flex-direction: column;
    gap: var(--s500-col-gap);
}

.s500-hosted .reservation-content {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--s500-col-gap);
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.s500-hosted .reservation-content > div {
    width: auto;
    max-width: none;
    flex: none;
    margin: 0;
    padding: 0;
}

.s500-hosted .reservation-content .t3v {
    float: none;
    width: 100%;
}

.s500-hosted .reservation-content label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #000;
}

.s500-hosted input.reservation-input,
.s500-hosted select.reservation-input {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #c4c4c4 !important;
    border-radius: 8px;
    background-color: #fff;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
    box-shadow: none;
}

.s500-hosted select.reservation-input {
    padding-right: 40px;
    background-image: url('/img/s500/selectarrow.svg');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.s500-hosted input.reservation-input:focus,
.s500-hosted select.reservation-input:focus {
    outline: 2px solid var(--s500-focus);
    outline-offset: -2px;
}

.s500-hosted .inner-addon {
    position: relative;
}

.s500-hosted .inner-addon label {
    position: relative;
}

.s500-hosted .inner-addon .bi-calendar-fill {
    position: absolute;
    right: 12px;
    bottom: 8px;
    pointer-events: none;
}

.s500-hosted input#r_date {
    padding-right: 40px;
}

.s500-hosted .Order_Reservation hr {
    width: 100%;
    height: 0;

    margin: 0 !important;
    padding: 0;
    border: 0;
    border-top: 1px solid #a8a8a8;
    opacity: 1;
    background: none;
}

.s500-hosted .Order_Reservation h3 {
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    margin: 0 !important;

    text-align: left !important;
    color: #000;
}

.s500-hosted .row.hours {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.s500-hosted .row.hours .btn-group {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
}

.s500-reservation .s500-hosted .mzproducts_bg .Order_Reservation .hour-label {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    margin: 0;
    padding: 0 8px;
    border: 1px solid #c4c4c4 !important;
    border-radius: 8px !important;
    background-color: #fff !important;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000 !important;
    cursor: pointer;
}

.s500-reservation .s500-hosted .mzproducts_bg .Order_Reservation .hour-label:hover {
    border-color: var(--s500-accent) !important;
}

.s500-reservation .s500-hosted .mzproducts_bg .Order_Reservation .btn-check:checked + .hour-label {
    border-color: transparent !important;
    color: #fff !important;
    font-weight: 600;
}

.s500-hosted .btn-check:focus-visible + .hour-label {
    outline: 2px solid var(--s500-focus);
    outline-offset: 2px;
}

.s500-hosted .row-submit {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    margin: 0 !important;
    padding: 0 !important;
}

.s500-hosted #frm_reservation_go {
    width: auto;
    min-width: 200px;
    height: auto;
    margin: 0;
    padding: 14px 24px;
    border: 0 !important;
    border-radius: 12px;
    background-color: var(--s500-accent-soft);
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000 !important;
    cursor: pointer;
}

.s500-hosted .pomin_box {
    width: 100%;
    margin-top: var(--s500-block);
    padding: 0;
    text-align: left;
}

.s500-reservation .s500-hosted .pomin_box .pomin_box_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto;
    min-width: 268px;
    height: auto !important;
    margin: 0;
    padding: 13px 23px !important;
    border: 1px solid var(--s500-accent) !important;
    border-radius: 12px !important;
    background-color: transparent !important;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000 !important;
    cursor: pointer;
}

.s500-hosted #modal_go {
    display: none !important;
}

#ui-datepicker-div {
    padding: 8px;
    border: 1px solid #e3e3e3;
    border-radius: var(--s500-card-radius);
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
}

#ui-datepicker-div .ui-datepicker-title {
    font-weight: 600;
}

#ui-datepicker-div td a,
#ui-datepicker-div td span {
    border-radius: 4px;
}

@media (max-width: 900px) {
    .s500-hosted .reservation-content {
        grid-template-columns: minmax(0, 1fr);
    }

    .s500-hosted .row.hours {
        grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
    }

    .s500-hosted .row-submit,
    .s500-reservation .s500-hosted .pomin_box .pomin_box_btn {
        width: 100%;
    }

    .s500-hosted #frm_reservation_go,
    .s500-reservation .s500-hosted .pomin_box .pomin_box_btn {
        width: 100%;
        min-width: 0;
    }
}

.s500-alert {
    margin-bottom: var(--s500-col-gap);
    padding: var(--s500-panel-pad);
    background: #fff;
    border: 1px solid var(--s500-blad);
    border-left-width: 4px;
    border-radius: var(--s500-card-radius);
    font-family: 'Montserrat', Arial, sans-serif;
    color: #000;
}

.s500-alert:focus {
    outline: 2px solid var(--s500-blad);
    outline-offset: 2px;
}

.s500-alert__title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
}

.s500-alert__list {
    margin: 0;
    padding-left: 20px;
    font-size: 14px;
    line-height: 22px;
}

.s500-alert__list a {
    color: var(--s500-blad);
    text-decoration: underline;
}

.s500-alert__list a:hover {
    text-decoration: none;
}

/* The message sits in the row gap (--s500-field-row-gap is 16-24px, the message
   is 18px), so showing or hiding it never moves anything. Absolute positioning is
   what keeps the card still; the trade-off is that a very long message is clipped
   to one line, hence the short wording of every message in the validator. */
/* Only the order form needs the taller gap: that is where the message hangs under
   a field. The same token drives the listing filter grid, which has no messages. */
/* Komunikat wisi pod polem poza flow, więc odstęp między wierszami trzeba było
   zarezerwować ręcznie. Pod OSTATNIM wierszem nie rezerwował go nikt i tekst błędu
   lądował tuż nad tym, co szło dalej - na formularzu zamówienia nad "Faktura". */
.s500-order .s500-fields,
.s500-order .s500-panel .s500-fields {
    row-gap: 24px;
    padding-bottom: 20px;
}

.s500-field__error {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 2px 0 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 18px;
    color: var(--s500-blad);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* the checkbox rows keep the message in the flow: they sit at the bottom of their
   card, where growing by one line pushes nothing else around */
.s500-checkrow + .s500-field__error,
.s500-checkrow--long + .s500-field__error,
.s500-order__pay + .s500-field__error {
    position: static;
    margin-top: 8px;
    white-space: normal;
    overflow: visible;
}

.s500-field__input[aria-invalid="true"],
.s500-textarea[aria-invalid="true"] {
    border-color: var(--s500-blad) !important;
}

.s500-btn,
.s500-card__cta,
.s500-action__btn,
.s500-cartservice__add,
.s500-cart__remove,
.s500-card,
.s500-card__photo img,
.s500-field__input,
.s500-textarea,
.s500-check,
select.s500-cart-select,
select.s500-card__qty,
.s500-listing .pagination a,
.s500-breadcrumbs__list a,
.s500-point__list a,
.s500-contact-list a,
.s500-workshop__route,
.s500-workshop__fb,
.s500-empty__action,
.s500-eu__head,
.s500-prices__head {
    transition: background-color var(--s500-ruch), border-color var(--s500-ruch),
                color var(--s500-ruch), box-shadow var(--s500-ruch),
                transform var(--s500-ruch), filter var(--s500-ruch);
}

.s500-listing a:focus-visible,
.s500-listing button:focus-visible,
.s500-listing select:focus-visible,
.s500-listing input:focus-visible,
.s500-listing summary:focus-visible,
.s500-breadcrumbs a:focus-visible,
.s500-card a:focus-visible,
.s500-card button:focus-visible,
.s500-card select:focus-visible,
.s500-product a:focus-visible,
.s500-product button:focus-visible,
.s500-product select:focus-visible,
.s500-similar a:focus-visible,
.s500-similar button:focus-visible,
.s500-similar select:focus-visible,
.s500-home-actions a:focus-visible,
.s500-home-actions summary:focus-visible,
.s500-cart a:focus-visible,
.s500-cart button:focus-visible,
.s500-cart select:focus-visible,
.s500-order a:focus-visible,
.s500-order button:focus-visible,
.s500-order select:focus-visible,
.s500-order textarea:focus-visible,
.s500-reservation a:focus-visible,
.s500-reservation button:focus-visible,
.s500-reservation select:focus-visible,
.s500-reservation input:focus-visible,
.s500-summary-page a:focus-visible,
.s500-summary-page button:focus-visible,
.s500-promo a:focus-visible,
.newsletter a:focus-visible,
.newsletter button:focus-visible,
.newsletter input:focus-visible {
    outline: 2px solid var(--s500-focus);
    outline-offset: 2px;
    border-radius: 4px;
}

.s500-btn--solid:hover,
button.s500-card__cta:hover,
.s500-action__btn:hover,
.s500-empty__action:hover,
.s500-hosted #frm_reservation_go:hover {
    filter: brightness(0.93);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-1px);
}

.s500-btn--solid:active,
button.s500-card__cta:active,
.s500-action__btn:active,
.s500-empty__action:active,
.s500-hosted #frm_reservation_go:active {
    filter: brightness(0.86);
    box-shadow: none;
    transform: translateY(0);
}

.s500-btn:disabled,
button.s500-card__cta:disabled,
.s500-hosted #frm_reservation_go:disabled {
    filter: grayscale(0.4);
    opacity: 0.6;
    box-shadow: none;
    transform: none;
    cursor: progress;
}

.s500-btn--ghost:hover,
.s500-reservation .s500-hosted .pomin_box .pomin_box_btn:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.s500-btn--ghost:active,
.s500-reservation .s500-hosted .pomin_box .pomin_box_btn:active {
    background-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: none;
    transform: translateY(0);
}

.s500-cartservice__add:hover {
    background-color: var(--s500-accent);
    color: #fff;
}

.s500-card:hover {
    border-color: var(--s500-accent);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.s500-card__photo {
    overflow: hidden;
}

.s500-card__photo:hover img {
    transform: scale(1.04);
}

.s500-card__brand a:hover {
    color: var(--s500-highlight);
    text-decoration: none;
}

.s500-field__input:hover,
.s500-textarea:hover,
.s500-hosted input.reservation-input:hover,
.s500-hosted select.reservation-input:hover {
    border-color: #8a8a8a !important;
}

select.s500-cart-select:hover,
select.s500-card__qty:hover {
    border-color: var(--s500-accent) !important;
}

.s500-listing #frm select.product-select:hover,
.s500-listing #frm input.product-select:hover,
.s500-listing #frm .multiselect-dropdown:hover,
.s500-listing-head select.product-select:hover {
    border-color: var(--s500-accent) !important;
}

input.s500-check:hover,
.s500-listing #frm .sectionfilter_sec > label input[type="checkbox"]:hover {
    border-color: var(--s500-accent) !important;
}

.s500-checkrow label:hover,
.s500-checkrow--long label:hover {
    color: var(--s500-highlight);
}

.s500-point__list a:hover,
.s500-contact-list a:hover,
.s500-workshop__route:hover,
.s500-workshop__fb:hover {
    color: var(--s500-highlight);
    text-decoration: underline;
}

.s500-checkrow--long a:hover {
    color: var(--s500-highlight);
}

.s500-listing .pagination a:not(:has(strong)):hover {
    background: var(--s500-accent-deep);
    color: #fff;
}

.s500-eu__head:hover,
.s500-prices__head:hover {
    color: var(--s500-highlight);
}

@media (prefers-reduced-motion: reduce) {
    .s500-btn,
    .s500-card,
    .s500-card__photo img,
    .s500-action__btn,
    .s500-card__cta {
        transition: none;
    }

    .s500-btn--solid:hover,
    .s500-btn--ghost:hover,
    button.s500-card__cta:hover,
    .s500-action__btn:hover,
    .s500-card__photo:hover img {
        transform: none;
    }
}

/* Loading state for step 3: the calendar arrives over AJAX and until then
   cart_3.blade.php:155 shows a bare "Trwa ladowanie..." text node. The selector
   matches only while the container has no element children, so it stops applying
   by itself once the calendar is inserted - no change needed in the old view. */
.s500-reservation #reservationaj:not(:has(*)) {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 240px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #555;
}

.s500-reservation #reservationaj:not(:has(*))::before {
    content: '';
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    border: 2px solid #dcdcdc;
    border-top-color: var(--s500-focus);
    border-radius: 50%;
    animation: s500-obrot 0.8s linear infinite;
}

@keyframes s500-obrot {
    to { transform: rotate(360deg); }
}

/* "No suitable slot" modal from reservation/1.blade.php. jquery-modal moves the
   dialog into a .blocker appended to <body>, so these selectors cannot be nested
   under .s500-reservation; this stylesheet is loaded only on -new pages, which is
   what keeps the old layout unaffected. The plugin centres vertically with an
   inline-block plus ::before trick that did not hold here, hence flex and hiding
   that pseudo-element. The old view also sets height:240px !important. */
.jquery-modal.blocker {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: left;
}

.jquery-modal.blocker::before {
    display: none;
}

.jquery-modal .modal {
    position: static;
    width: 100%;
    max-width: 520px;
    height: auto !important;
    margin: 0;
    padding: 32px;
    border-radius: var(--s500-card-radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
}

.jquery-modal .modal p {
    margin: 0 0 24px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #000;
}

.jquery-modal .modal .btn {
    display: block;
    width: 100%;
    max-width: 240px;
    margin: 0 auto !important;
}

.s500-news-msg {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 22px;
}

.s500-news-msg--ok {
    background: rgba(36, 217, 0, 0.15);
    color: #eafbe6;
}

.s500-news-msg--err {
    background: rgba(217, 32, 32, 0.2);
    color: #ffd9d9;
}

@media (prefers-reduced-motion: reduce) {
    .s500-reservation #reservationaj:not(:has(*))::before {
        animation: none;
    }
}

/* ==========================================================================
   BOOKING A VISIT, CART STEP 3 - Figma 447:2142
   --------------------------------------------------------------------------
   The frame hard-codes the tile colours as hex instead of design tokens
   (#FBEDCA fill, #E4A400 text, #FFB700 arrow icon), so they are lifted into
   variables here. A selected state does not exist in the frame at all - the mock
   shows 72 identical tiles - so it takes the company accent, the only colour in
   this layout that is allowed to mean "chosen".
   ========================================================================== */

:root {
    --s500-slot-bg: #fbedca;
    --s500-slot-fg: #e4a400;
    --s500-slot-off-bg: #f6f6f6;
    --s500-slot-off-fg: #a8a8a8;
}

.s500-book {
    padding: var(--s500-block) 0;
    background: var(--s500-page-bg);
    box-shadow: 0 0 0 100vmax var(--s500-page-bg);
    clip-path: inset(0 -100vmax);
}

.s500-book > .ct {
    padding-left: var(--s500-gutter);
    padding-right: var(--s500-gutter);
}

/* frame: left column 704, right 426, 70px apart */
.s500-book__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 426px;
    gap: 70px;
    align-items: start;
}

/* no 704px cap: the frame's left column was sized for six days, and the strip is
   the one element here that gains from every pixel it can get */
.s500-book__main {
    display: flex;
    flex-direction: column;
    gap: 32px;
    min-width: 0;
}

.s500-book__side {
    min-width: 0;
}

/* two fields, 64px apart, each filling half of the 704px column */
/* both fields fill the row, halves of whatever width the column has */
/* three fields in one row: vehicle type, runflat and the day picker. 64px between
   two of them was already generous; across three it pushed the last one off the
   column, so the gap comes down with the extra column. */
.s500-book__fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    width: 100%;
    align-items: start;
}

/* The frame draws these two as static labels; they are real selects, because
   changing the vehicle type or runflat is what reloads the hours.

   The select fills the whole box and the caption floats over it, so a click
   anywhere in the field opens the list. Wrapping both in a <label> is not enough:
   a label focuses a select, it does not open it. */
.s500-book__field {
    position: relative;
    display: block;
    height: 56px;
    background: #fff;
    border: 0.5px solid #a8a8a8;
    border-radius: 3px;
    cursor: pointer;
    transition: border-color var(--s500-ruch), outline-color var(--s500-ruch);
}

.s500-book__field-label {
    position: absolute;
    top: 4px;
    left: 12px;
    right: 36px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none;
    cursor: inherit;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #adb5bd;
}

.s500-book__field-select {
    width: 100%;
    height: 100%;
    min-width: 0;
    /* the top padding is the caption's room, so the value sits under it */
    padding: 24px 36px 4px 12px;
    border: 0;
    border-radius: inherit;
    background: transparent url('/img/s500/icon-chevron.svg') no-repeat right 12px center / 16px 16px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: #000;
    appearance: none;
    cursor: pointer;
}

/* The ring belongs to the whole field, not to the select inside it: drawn on the
   select it landed between the field's own 0.5px border and the text, which read as
   a double frame the moment the dropdown opened. */
.s500-book__field-select:focus,
.s500-book__field-select:focus-visible {
    outline: none;
}

.s500-book__field:focus-within {
    outline: 2px solid var(--s500-focus);
    outline-offset: 2px;
    border-color: transparent;
}

/* a select is a control, so the whole field reacts to the pointer */
.s500-book__field:hover {
    border-color: #6f6f6f;
}

/* arrows sit outside the day columns, 48px away from them */
/* 48px between arrows and strip stays from the frame; between the columns it is the
   minimum, and space-between spreads whatever is left so the strip fills the row */
.s500-book__cal {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.s500-book__days {
    display: flex;
    flex: 1 1 auto;
    justify-content: space-between;
    gap: 20px;
    min-width: 0;
}

.s500-book__day {
    display: flex;
    flex: 0 0 52px;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 52px;
}

.s500-book__date {
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    color: #000;
}

/* the weekday belongs to the date above it, so the 16px column gap is pulled back
   here - otherwise the pair reads as two separate rows */
.s500-book__weekday {
    margin: -14px 0 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #555;
}

.s500-book__slot {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 30px;
    padding: 4px;
    border: 0;
    border-radius: 4px;
    background: var(--s500-slot-bg);
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 22px;
    color: var(--s500-slot-fg);
    cursor: pointer;
    transition: background-color var(--s500-ruch), color var(--s500-ruch),
                transform var(--s500-ruch);
}

/* only a free hour reacts: --off is a <span>, and without the guard the generic
   hover repainted an hour nobody can book */
.s500-book__slot:not(.s500-book__slot--off):hover {
    background: var(--s500-accent);
    color: #fff;
    transform: translateY(-1px);
}

.s500-book__slot:focus-visible {
    outline: 2px solid var(--s500-focus);
    outline-offset: 2px;
}

/* an hour that another day offers but this one does not: keeps the rows aligned,
   so 09:00 in one column never sits next to 11:30 in the next */
.s500-book__slot--off {
    background: var(--s500-slot-off-bg);
    color: var(--s500-slot-off-fg);
    cursor: not-allowed;
}

.s500-book__arrow {
    position: relative;
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    margin-top: 46px;
    border-radius: 14px;
    background: var(--s500-slot-bg);
    text-decoration: none;
}

.s500-book__arrow::before {
    content: '';
    position: absolute;
    inset: 4px;
    background: var(--s500-accent);
    -webkit-mask: url('/img/s500/icon-chevron.svg') no-repeat center / 20px 20px;
    mask: url('/img/s500/icon-chevron.svg') no-repeat center / 20px 20px;
}

.s500-book__arrow--prev::before {
    transform: rotate(90deg);
}

.s500-book__arrow--next::before {
    transform: rotate(-90deg);
}

/* the disabled look is the one state the frame does define, on the arrows */
.s500-book__arrow--off {
    background: #e3e3e3;
    cursor: default;
}

.s500-book__arrow--off::before {
    background: #f6f6f6;
}

.s500-book__empty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: var(--s500-card-pad);
    background: #fff;
    border-radius: var(--s500-card-radius);
}

.s500-book__empty-title {
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #000;
}

.s500-book__empty-text {
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #555;
}

.s500-book__skip {
    align-self: flex-start;
}

@media (max-width: 1200px) {
    .s500-book__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s500-block);
    }

    .s500-book__main {
        max-width: none;
    }
}

@media (max-width: 900px) {
    .s500-book__fields {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--s500-col-gap);
    }

    .s500-daypick__panel {
        width: 100%;
    }

    /* fewer columns, never a sideways scrollbar: the script hides whatever does not
       fit and makes the arrows step by what is left, so on a phone they matter more
       than on a desktop, not less */
    .s500-book__cal {
        gap: 12px;
    }

    .s500-book__days {
        justify-content: flex-start;
        gap: var(--s500-col-gap);
    }
}

/* On a phone 16px gaps and 12px around the arrows left 248px for the days, eight
   short of a fourth column, and the three that fit hugged the left edge. Tighter
   gaps give four days from 375px up; space-between spreads whatever fits. */
@media (max-width: 600px) {
    .s500-book__cal {
        gap: 8px;
    }

    .s500-book__days {
        justify-content: space-between;
        gap: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .s500-book__slot {
        transition: none;
    }

    .s500-book__slot:hover {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Booking screen, corrections after the first render
   -------------------------------------------------------------------------- */

/* The frame puts this screen on WHITE with a grey card, the opposite of cart
   steps 1 and 2. Keeping the grey page here made the workshop card invisible,
   because the card is grey too. */
.s500-book {
    background: #fff;
    box-shadow: none;
    clip-path: none;
}

/* "unavailable hour" has to be visible against both the white page and the grey
   card, so it is a shade darker than either */
:root {
    --s500-slot-off-bg: #ececec;
}

/* The card was built for the home page, where it sits in a full-width row and
   lays the photo out next to the text. In the 426px column of the booking
   screen that overflowed by 40px, and the frame wants it stacked anyway:
   avatar, then name, address, phones, mails, Facebook, one under another. */
.s500-book__side .s500-workshop {
    padding: 32px;
}

.s500-book__side .s500-workshop__head,
.s500-book__side .s500-workshop__id {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
}

.s500-book__side .s500-workshop__about,
.s500-book__side .s500-workshop__contact,
.s500-book__side .s500-workshop__cols {
    width: 100%;
    min-width: 0;
}

.s500-book__side .s500-workshop__cols {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.s500-book__side .s500-workshop__name,
.s500-book__side .s500-workshop__addr,
.s500-book__side .s500-workshop__route {
    width: 100%;
}

/* dividers between location, phones and mails, as the frame annotation asks */
.s500-book__side .s500-workshop__contact {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #cacaca;
}

.s500-book__side .s500-workshop__social {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #cacaca;
}

/* the booking notice is information, not an error: same box, calmer colour */
.s500-alert--info {
    border-color: var(--s500-accent);
}

.s500-alert--info .s500-alert__list {
    color: #555;
}

/* --------------------------------------------------------------------------
   Booking screen, stage 2: vehicle data (Figma 1315:7135)
   -------------------------------------------------------------------------- */

/* the heading block belongs to the form column here, because the term pill under
   the title spans exactly that column in the frame */
.s500-book--dane .s500-cart__head {
    align-self: stretch;
    gap: 16px;
    margin-bottom: 0;
}

.s500-book__termin {
    align-self: stretch;
    margin: 0;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--s500-accent);
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #000;
    text-align: center;
}

.s500-book__form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.s500-fields--one {
    grid-template-columns: minmax(0, 1fr);
}

/* the validation message hangs below the field, so the rows need room for it -
   same trick as the order form, where a growing message moved the whole card */
.s500-book__form .s500-fields {
    row-gap: 24px;
}

.s500-textarea--tall {
    min-height: 120px;
}

.s500-book__price {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px;
    border-radius: 32px;
    background: #f6f6f6;
}

.s500-book__price-value {
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 28px;
    color: #000;
}

.s500-book__price-value strong {
    font-weight: 700;
}

.s500-book__price-note {
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
    color: #555;
}

.s500-book__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

@media (max-width: 700px) {
    .s500-book__price {
        padding: 24px;
        border-radius: 20px;
    }

    .s500-book__actions .s500-btn {
        width: 100%;
    }
}

/* the vehicle the visit is booked for, under its date: the customer typed it one
   step earlier and this is the last screen before the order is placed */
.s500-total__res-car {
    margin: -4px 0 0;
    padding: 0 16px 8px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    color: #555;
}

@media (max-width: 700px) {
    .s500-total__res-car {
        padding-left: 0;
        padding-right: 0;
    }
}

/* the deposit type is the only select on the vehicle-data form: same box as an
   input, with the arrow the rest of the shop draws instead of the browser's */
select.s500-field__input {
    padding-right: 40px;
    background-image: url('/img/s500/selectarrow.svg');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* the rim in the cart comes from the order: shown, not chosen, so no arrow */
select.s500-field__input:disabled {
    background-color: #f6f6f6;
    background-image: none;
    color: #000;
    opacity: 1;
    cursor: default;
}

.s500-book__hint {
    margin: -8px 0 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 13px;
    line-height: 20px;
    color: #555;
}

/* price per tyre on the left, the set on the right, as on the old card */
.s500-book__price-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: 4px 16px;
}

/* --------------------------------------------------------------------------
   Standalone booking: stages 3 and 4, and the page after it
   -------------------------------------------------------------------------- */

/* The cart's four labels fit the 679px bar; "Dane do rezerwacji" and
   "Potwierdzenie" do not, so the standalone bar is allowed the column's width. */
.s500-steps--wide {
    max-width: none;
}

/* one read-only block of the review, Figma 461:1338 */
.s500-review {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: var(--s500-card-pad);
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: var(--s500-card-radius);
}

.s500-review__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.s500-review__title {
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: #000;
}

/* the frame has no way back from the review; a wrong plate three screens deep
   needs one, and it costs a link */
.s500-review__edit {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: var(--s500-label-medium-size);
    font-weight: 400;
    line-height: var(--s500-label-medium-line);
    color: #555;
    text-decoration: underline;
    white-space: nowrap;
}

.s500-review__edit:hover {
    color: #000;
}

.s500-review__list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

/* the frame lets the values run straight after the label, which leaves the column
   ragged; a fixed label column costs nothing and reads as a table, which is what
   this is */
.s500-review__row {
    display: flex;
    gap: 24px;
}

.s500-review__row dt {
    flex: 0 0 180px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #000;
}

.s500-review__row dd {
    margin: 0;
    min-width: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
    overflow-wrap: anywhere;
}

.s500-review__text {
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
}

/* the page after the booking: one centred column, no card, no step bar */
.s500-done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 640px;
    margin: 0 auto;
    padding: var(--s500-block) 0;
    text-align: center;
}

.s500-done__block {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.s500-done__title {
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: #000;
}

.s500-done__text {
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
}

.s500-done__text strong {
    font-weight: 600;
}

/* Na ekranie końcowym nie ma już postępu ani cofania, więc przyciski układają się
   pod sobą niezależnie od szerokości. Selektor bierze obie klasy, bo reguła kierunku
   dla .s500-book__actions stoi niżej w pliku i przy równej wadze by tę wygrała. */
.s500-book__actions.s500-done__actions {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Anulowanie rezerwacji (anulowanie_rezerwacji_new): sam komunikat, więc strona
   jest krótka i stopka wisiała w połowie okna. Body w kolumnie na całą wysokość
   okna, treść zajmuje wolne miejsce i stoi w nim pośrodku, stopka na dole. */
body.s500-shell:has(.s500-anuluj) {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

body.s500-shell:has(.s500-anuluj) > * {
    flex-shrink: 0;
}

.s500-book.s500-anuluj {
    flex: 1 0 auto;
    display: flex;
    align-items: center;
    padding: 96px 0;
}

.s500-anuluj > .ct {
    width: 100%;
}

.s500-anuluj .s500-done {
    gap: 32px;
    max-width: 720px;
    padding: 0;
}

.s500-anuluj .s500-cart__title {
    margin: 0;
    font-size: 48px;
    line-height: 60px;
}

.s500-anuluj .s500-done__text {
    font-size: 18px;
    line-height: 28px;
}

.s500-anuluj .s500-btn {
    min-width: 300px;
    padding: 16px 32px;
    font-size: 18px;
    line-height: 26px;
}

@media (max-width: 600px) {
    .s500-book.s500-anuluj {
        padding: 48px 0;
    }

    .s500-anuluj .s500-done {
        gap: 24px;
    }

    .s500-anuluj .s500-cart__title {
        font-size: 32px;
        line-height: 40px;
    }

    .s500-anuluj .s500-done__text {
        font-size: 16px;
        line-height: 24px;
    }

    .s500-anuluj .s500-btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 700px) {
    .s500-review__row {
        flex-direction: column;
        gap: 2px;
    }

    .s500-review__row dt {
        flex: 0 0 auto;
    }
}

/* --------------------------------------------------------------------------
   Poprawki z testów (S500-64)
   -------------------------------------------------------------------------- */

/* Krok naprzód to zawsze wypełniony przycisk, więc pogrubienie idzie na wariant,
   a nie na pojedyncze ekrany. */
.s500-btn--solid {
    font-weight: 700;
}

/* Kierunek "dalej" czytamy w prawo, więc akcja postępu ma tam siedzieć na każdym
   ekranie obu ścieżek. W DOM zostaje pierwsza - na wąskim ekranie rząd rozkłada się
   w kolumnę i wtedy ma być na górze, nad cofaniem - a row-reverse odwraca tylko
   układ poziomy. */
.s500-book__actions {
    flex-direction: row-reverse;
    justify-content: space-between;
}

.s500-book__actions .s500-btn--ghost {
    min-width: 0;
}

@media (max-width: 700px) {
    .s500-book__actions {
        flex-direction: column;
    }
}

/* The message for a radio group is not inside a .s500-field, so the absolute
   positioning of .s500-field__error had nothing to hang on and the text drifted off
   the screen on a phone. Every grouped control keeps its message in the flow. */
[data-s500-grupa] + .s500-field__error {
    position: static;
    margin-top: 8px;
    white-space: normal;
    overflow: visible;
}

/* and the group itself is marked, the way an invalid input is */
[data-s500-grupa][aria-invalid="true"] .s500-check {
    outline: 1px solid var(--s500-blad);
    outline-offset: 1px;
}

[data-s500-grupa][aria-invalid="true"] label {
    color: var(--s500-blad);
}

/* back to the shop: its own row under the left column on desktop, last in the
   stack on a phone, so "Dalej" comes first */
.s500-cart__back {
    grid-column: 1;
    justify-self: start;
    margin-top: var(--s500-block);
}

/* --------------------------------------------------------------------------
   Wybór dnia nad paskiem godzin
   -------------------------------------------------------------------------- */

.s500-daypick {
    position: relative;
    min-width: 0;
}

/* the closed state is one of the fields from the row above it */
.s500-daypick__field {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* <summary> nie dziedziczy border-box z resetu, więc min-height liczyło się od
       zawartości i pole wychodziło o 10px wyższe od sąsiednich selektów */
    box-sizing: border-box;
    height: 56px;
    padding: 4px 44px 4px 12px;
    background: #fff;
    border: 0.5px solid #a8a8a8;
    border-radius: 3px;
    cursor: pointer;
    list-style: none;
    transition: border-color var(--s500-ruch);
}

.s500-daypick__field::-webkit-details-marker {
    display: none;
}

.s500-daypick__field:hover {
    border-color: #6f6f6f;
}

.s500-daypick__field:focus-visible {
    outline: 2px solid var(--s500-focus);
    outline-offset: 2px;
}

/* A box with a thick top border read as a filled square, not a calendar. Same
   masking trick the strip arrows use, so the glyph still takes the company colour. */
.s500-daypick__field::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 12px;
    width: 16px;
    height: 16px;
    margin-top: -8px;
    background: var(--s500-accent);
    -webkit-mask: url('/img/s500/icon-kalendarz.svg') no-repeat center / 16px 16px;
    mask: url('/img/s500/icon-kalendarz.svg') no-repeat center / 16px 16px;
    pointer-events: none;
}

.s500-daypick__label {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #adb5bd;
}

/* one line, always: a second one pushed the label out over the top border */
.s500-daypick__value {
    overflow: hidden;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 28px;
    color: #000;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.s500-daypick__panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 8px);
    left: 0;
    width: 300px;
    padding: 16px;
    background: #fff;
    border: 1px solid #e3e3e3;
    border-radius: var(--s500-card-radius);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.s500-daypick__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 12px;
}

.s500-daypick__msc {
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px;
    color: #000;
}

.s500-daypick__nav {
    position: relative;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background: var(--s500-slot-bg);
}

.s500-daypick__nav::before {
    content: '';
    position: absolute;
    inset: 4px;
    background: var(--s500-accent);
    -webkit-mask: url('/img/s500/icon-chevron.svg') no-repeat center / 16px 16px;
    mask: url('/img/s500/icon-chevron.svg') no-repeat center / 16px 16px;
}

.s500-daypick__nav--prev::before {
    transform: rotate(90deg);
}

.s500-daypick__nav--next::before {
    transform: rotate(-90deg);
}

.s500-daypick__nav--off {
    background: #e3e3e3;
}

.s500-daypick__nav--off::before {
    background: #f6f6f6;
}

.s500-daypick__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.s500-daypick__dow {
    padding: 4px 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    color: #555;
    text-align: center;
}

.s500-daypick__day {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    border-radius: 4px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: center;
    text-decoration: none;
}

/* green, as on the current production picker: the one thing the customer is
   looking for is which days have anything left */
.s500-daypick__day--free {
    background: #20bf00;
    color: #fff;
}

.s500-daypick__day--free:hover {
    filter: brightness(0.92);
    color: #fff;
    text-decoration: none;
}

.s500-daypick__day--free:focus-visible {
    outline: 2px solid #0044ff;
    outline-offset: 1px;
}

.s500-daypick__day--off {
    background: #f6f6f6;
    color: #a8a8a8;
    cursor: not-allowed;
}

.s500-daypick__day--on {
    outline: 2px solid #000;
    outline-offset: -2px;
}

.s500-daypick__legenda {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 0 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
    color: #555;
}

.s500-daypick__kropka {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: #20bf00;
}

@media (max-width: 700px) {
    .s500-daypick {
        max-width: none;
    }

    .s500-daypick__panel {
        width: 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .s500-daypick__field {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   Combobox marki/modelu pojazdu (krok "Dane do rezerwacji")
   -------------------------------------------------------------------------- */

.s500-combo {
    position: relative;
}

.s500-combo__toggle {
    display: flex;
    align-items: center;
    text-align: left;
    cursor: pointer;
    padding-right: 40px;
    background-image: url('/img/s500/selectarrow.svg');
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px 16px;
}

.s500-combo__toggle[disabled] {
    cursor: not-allowed;
    color: #9a9a9a;
    background-color: #f4f4f4;
}

.s500-combo__toggle .s500-combo__value--empty {
    color: #757575;
}

.s500-combo__toggle .s500-combo__value {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.s500-combo__panel {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 30;
    padding: 12px 0 0;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.s500-combo__panel[hidden] {
    display: none;
}

.s500-combo__search {
    display: block;
    box-sizing: border-box;
    width: calc(100% - 24px);
    margin: 0 12px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #c4c4c4;
    border-radius: 8px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #000;
}

.s500-combo__search:focus {
    outline: 2px solid var(--s500-focus);
    outline-offset: -2px;
}

.s500-combo__count {
    margin: 8px 12px 0;
    padding-bottom: 8px;
    border-bottom: 1px solid #e3e3e3;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 13px;
    color: #757575;
}

.s500-combo__list {
    max-height: 300px;
    margin: 0;
    padding: 4px 0 8px;
    list-style: none;
    overflow-y: auto;
}

.s500-combo__item {
    padding: 10px 20px;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    line-height: 24px;
    color: #000;
    cursor: pointer;
}

.s500-combo__item:hover,
.s500-combo__item--active {
    background: #f2f5ff;
}

.s500-combo__item--selected {
    font-weight: 600;
}

.s500-combo__item--custom {
    color: var(--s500-focus);
}

.s500-combo__item--muted {
    color: #757575;
}

/* ==========================================================================
   Wizytowka zewnetrzna (Figma 2114:11283), shared.layout500zew
   Ten sam uklad tresci co wizytowka wewnetrzna, ale na domenie warsztatu: jego
   logo, menu i dane w stopce. Kolor warsztatu nadpisuje tylko --s500-accent*
   (layout500zew), a --s500-on-accent mowi, jaki tekst stoi na tym kolorze.
   ========================================================================== */

.s500-zew {
    --s500-zew-dark: #2b2b2b;
    --s500-zew-open: #20bf00;
    --s500-zew-border: #e3e3e3;
    font-family: 'Montserrat', Arial, sans-serif;
    background: #fff;
}

/* Ramki wizytowki (Figma 2114:11283 / 11438 / 11593 / 11747) trzymaja tresc
   w 1200px, czyli 120px z bokow przy 1440, a nie 84px jak sklep; 1024 i 768
   -> 48, 530 -> 24. Stopka zostaje przy swoich 84px, jak w ramce. */
.s500-zew {
    --s500-gutter: 120px;
}

@media (max-width: 1100px) {
    .s500-zew {
        --s500-gutter: 48px;
    }
}

@media (max-width: 600px) {
    .s500-zew {
        --s500-gutter: 24px;
    }
}

/* --- naglowek warsztatu ------------------------------------------------- */

.s500-zew-header {
    background: #fff;
    border-bottom: 1px solid var(--s500-zew-border);
}

.s500-zew-header__in,
.s500-zew-bar__in {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--s500-gutter);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* 93px razem z dolna kreska, jak w ramce */
.s500-zew-header__in {
    min-height: 92px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.s500-zew-header__logo {
    display: flex;
    align-items: center;
    flex: 0 1 auto;
    min-width: 0;
    color: #000;
    text-decoration: none;
}

.s500-zew-header__logo:hover {
    color: #000;
}

.s500-zew-header__logo img {
    display: block;
    max-width: min(220px, 100%);
    max-height: 56px;
    object-fit: contain;
}

.s500-zew-header__logo span {
    overflow: hidden;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.s500-zew-header__nav,
.s500-zew-header__cart {
    flex: 0 0 auto;
}

.s500-zew-header__nav {
    display: flex;
    align-items: center;
    gap: 23px;
}

.s500-zew-header__nav a,
.s500-zew-header__cart {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
    text-decoration: none;
    white-space: nowrap;
}

.s500-zew-header__nav a:hover,
.s500-zew-header__cart:hover {
    color: #000;
    text-decoration: underline;
}

.s500-zew-header__cart {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.s500-zew-header__cart .bi {
    font-size: 24px;
    line-height: 1;
}

.s500-zew-header__cart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 11px;
    background: var(--s500-accent);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    color: var(--s500-on-accent, #000);
}

/* --- ciemny pasek: telefon, godziny, adres ------------------------------ */

.s500-zew-bar {
    background: var(--s500-zew-dark);
    color: #fff;
}

.s500-zew-bar__in {
    min-height: 48px;
    padding-top: 8px;
    padding-bottom: 8px;
    flex-wrap: wrap;
    gap: 8px 32px;
}

.s500-zew-bar__tel {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 4px 15px;
    border: 1px solid #fff;
    border-radius: 5px;
    font-size: var(--s500-label-medium-size);
    line-height: var(--s500-label-medium-line);
    color: #fff;
    text-decoration: none;
}

.s500-zew-bar__tel:hover {
    color: #fff;
}

.s500-zew-bar__tel::before,
.s500-zew-bar__addr::before {
    content: '';
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    background: #fff;
}

.s500-zew-bar__tel::before {
    -webkit-mask: url('/img/s500/icon-tel.svg') no-repeat center / contain;
    mask: url('/img/s500/icon-tel.svg') no-repeat center / contain;
}

.s500-zew-bar__addr::before {
    -webkit-mask: url('/img/s500/icon-geo.svg') no-repeat center / contain;
    mask: url('/img/s500/icon-geo.svg') no-repeat center / contain;
}

.s500-zew-bar__info {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 32px;
}

.s500-zew-bar__status,
.s500-zew-bar__addr {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    line-height: 24px;
}

.s500-zew-bar__status {
    font-weight: 700;
}

.s500-zew-bar__status::before {
    content: '';
    flex: 0 0 14px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #a8a8a8;
}

.s500-zew-bar__status.is-open::before {
    background: var(--s500-zew-open);
}

/* --- hero z dwoma akcjami ------------------------------------------------ */

/* Zdjecie z gradientem zajmuje tylko gorne 443px, jak w ramce; kafle zachodza
   nizej na szare tlo, ktorym ciagnie sie dalej sekcja oferty. */
.s500-zew-hero {
    position: relative;
    padding: 77px 0 57px;
    background: var(--s500-page-bg);
}

.s500-zew-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 443px;
    background:
        linear-gradient(216.76deg, rgba(0, 0, 0, 0.643) 19.55%, rgba(0, 0, 0, 0.96) 72.29%),
        url('/img/s500/wizytowka-hero.jpg') no-repeat center / cover;
}

.s500-zew-hero .ct {
    position: relative;
}

.s500-zew-hero .ct,
.s500-zew-offer .ct,
.s500-zew-about .ct,
.s500-zew-contact .ct {
    padding: 0 var(--s500-gutter);
}

/* kafle stoja 221px od gory zdjecia niezaleznie od tego, czy nazwa zajmie
   jedna linie czy dwie (w ramce sa dwie), wiec naglowek rezerwuje 221 - 77 */
.s500-zew-hero__head {
    max-width: 691px;
    min-height: 144px;
    margin-bottom: 0;
}

.s500-zew-hero__head .s500-section-head__kicker,
.s500-zew-hero__head .s500-section-head__title {
    margin: 0;
    color: #fff;
}

.s500-zew-hero .s500-action {
    border-color: var(--s500-zew-border);
    border-radius: 17px;
}

/* bez kafli (oba moduły wyłączone): zdjęcie tylko pod tytułem, a oferta pod nim
   z własnym odstępem, bo nie ma kafli, które na nią zachodzą */
.s500-zew-hero--bez-akcji {
    padding-bottom: 77px;
}

.s500-zew-hero--bez-akcji::before {
    height: 100%;
}

.s500-zew-hero.s500-zew-hero--bez-akcji .s500-zew-hero__head {
    min-height: 0;
}

.s500-zew-hero--bez-akcji + .s500-zew-offer {
    padding-top: 68px;
}

/* od 1024 ikony w kafelkach sa mniejsze: 70x60 */
@media (max-width: 1100px) {
    .s500-zew-hero {
        padding-bottom: 42px;
    }

    .s500-zew-hero .s500-action__img {
        width: 70px;
        height: 60px;
    }
}

.s500-zew .s500-action__btn,
.s500-zew .s500-action__btn:hover,
.s500-zew .s500-action__btn:focus {
    color: var(--s500-on-accent, #000);
}

/* --- nasza oferta: HTML warsztatu --------------------------------------- */

.s500-zew-offer {
    padding: 0 0 68px;
    background: var(--s500-page-bg);
}

.s500-zew-offer__head {
    max-width: 691px;
    margin: 0 auto 30px;
    text-align: center;
}

.s500-zew-offer__head p,
.s500-zew-offer__head h2,
.s500-zew-about .s500-section-head p,
.s500-zew-about .s500-section-head h2,
.s500-zew-contact .s500-section-head p,
.s500-zew-contact .s500-section-head h2 {
    margin: 0;
}

/* Karty uslug (Figma 2122:12664), czytane z tekstu warsztatu: najwyzej cztery,
   po dwie w rzedzie. Ikona maskowana, wiec bierze kolor firmy jak reszta akcentow. */
.s500-zew-uslugi {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 30px;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.s500-zew-usluga {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 47px;
    background: #fff;
    border: 1px solid var(--s500-zew-border);
    border-radius: 17px;
    box-shadow: 6px -3px 25.75px rgba(0, 0, 0, 0.04);
    text-align: center;
}

.s500-zew-usluga__ikona {
    display: block;
    flex: 0 0 auto;
    width: 66px;
    height: 56px;
    background: var(--s500-accent);
    -webkit-mask: var(--s500-ikona) no-repeat center / contain;
    mask: var(--s500-ikona) no-repeat center / contain;
}

.s500-zew-usluga__ikona--opony { --s500-ikona: url('/img/s500/usluga-opony.svg'); }
.s500-zew-usluga__ikona--przechowalnia { --s500-ikona: url('/img/s500/usluga-przechowalnia.svg'); }
.s500-zew-usluga__ikona--felgi { --s500-ikona: url('/img/s500/usluga-felgi.svg'); }
.s500-zew-usluga__ikona--klimatyzacja { --s500-ikona: url('/img/s500/usluga-klimatyzacja.svg'); }

.s500-zew-usluga__tytul {
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
    color: #000;
}

.s500-zew-usluga__opis {
    margin: 0;
    font-family: 'Montserrat', Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #000;
    overflow-wrap: anywhere;
}

@media (max-width: 1100px) {
    .s500-zew-uslugi {
        padding: 0 72px;
    }
}

@media (max-width: 800px) {
    .s500-zew-uslugi {
        padding: 0;
    }
}

@media (max-width: 600px) {
    .s500-zew-uslugi {
        grid-template-columns: minmax(0, 1fr);
        gap: 16px;
    }

    .s500-zew-usluga {
        padding: 23px 47px;
    }
}

/* Tresc idzie z edytora warsztatu, wiec styl jest tylko typograficzny:
   obrazy i tabele nie moga rozepchnac strony. */
.s500-zew-html {
    font-size: 16px;
    line-height: 24px;
    color: #000;
    overflow-wrap: anywhere;
}

.s500-zew-html p {
    margin: 0 0 24px;
}

.s500-zew-html > :last-child {
    margin-bottom: 0;
}

.s500-zew-html img,
.s500-zew-html iframe,
.s500-zew-html video {
    max-width: 100%;
    height: auto;
}

.s500-zew-html table {
    max-width: 100%;
}

/* baner stoi w ramce tuz pod "O firmie" (jej 68px), a pod nim od razu
   "Jak dojechac" z wlasnymi 48px, wiec wlasny odstep slidera tu znika.
   Bez "O firmie" (warsztat nie ma tresci) baner szedlby zaraz po szarym tle
   kafli albo oferty, wiec wtedy sam bierze te 68px. */
.s500-zew .s500-promo {
    padding: 68px 0 0;
}

.s500-zew .s500-zew-about ~ .s500-promo {
    padding-top: 0;
}

/* --- o firmie ------------------------------------------------------------ */

.s500-zew-about {
    padding: 68px 0;
    background: #fff;
}

.s500-zew-about .ct {
    display: flex;
    align-items: flex-start;
    gap: 32px;
}

.s500-zew-about__text {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    flex-direction: column;
    gap: 32px;
}

.s500-zew-about__photo {
    flex: 0 0 583px;
    max-width: 48%;
    height: 502px;
}

.s500-zew-about__photo img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 24px;
    object-fit: cover;
}

/* --- jak dojechac -------------------------------------------------------- */

.s500-zew-contact {
    padding: 48px 0;
    background: #fff;
}

.s500-zew-contact .ct {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

/* karta nachodzi na mape o 103px, jak w ramce */
.s500-zew-contact__body {
    display: flex;
    align-items: center;
}

.s500-zew-contact__map {
    align-self: stretch;
    flex: 1 1 0;
    min-width: 0;
    min-height: 420px;
    margin-right: -103px;
    border-radius: 24px;
    overflow: hidden;
    background: var(--s500-page-bg);
}

.s500-zew-contact__map iframe {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 420px;
    border: 0;
}

.s500-zew-contact__card {
    position: relative;
    display: flex;
    flex: 0 0 401px;
    max-width: 100%;
    flex-direction: column;
    align-items: flex-start;
    gap: 23px;
    padding: 32px;
    border-radius: 32px;
    background: var(--s500-page-bg);
}

.s500-zew-contact__id {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 12px;
}

.s500-zew-contact__name {
    margin: 0;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: #000;
}

/* telefony nad mailami (1440, 1024), od 768 obok siebie */
.s500-zew-contact__cols {
    display: flex;
    flex-direction: column;
    align-self: stretch;
    gap: 24px;
}

.s500-zew-contact__addr {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    color: #000;
}

.s500-zew-contact__addr::before {
    content: '';
    flex: 0 0 17px;
    width: 17px;
    height: 24px;
    background: url('/img/s500/icon-geo.svg') no-repeat center / 17px 17px;
}

.s500-zew-contact__card .s500-contact-list {
    flex: 0 0 auto;
    gap: 8px;
}

.s500-zew-contact__social {
    align-self: stretch;
    margin-top: -11px;
    padding-top: 12px;
    border-top: 1px solid #c4c4c4;
}

.s500-zew-contact__route {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 17px;
    border-radius: 6px;
    background: var(--s500-accent);
    font-size: 14px;
    line-height: normal;
    color: var(--s500-on-accent, #000);
    text-decoration: none;
}

.s500-zew-contact__route:hover,
.s500-zew-contact__route:focus {
    color: var(--s500-on-accent, #000);
    text-decoration: none;
}

.s500-zew-contact__route::before {
    content: '';
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    border: 1px solid currentColor;
    border-radius: 5px;
    background: url('/img/s500/icon-trasa.svg') no-repeat center / 10px 10px;
}

/* --- stopka ------------------------------------------------------------- */

.s500-zew-footer__logo {
    display: block;
    width: 179px;
    height: 23px;
    margin-bottom: 32px;
}

.s500-zew-footer__cols {
    display: flex;
    align-items: flex-start;
    gap: 48px;
}

.s500-zew-footer__brand {
    display: flex;
    flex: 1 1 0;
    min-width: 0;
    min-height: 228px;
    flex-direction: column;
    justify-content: space-between;
    gap: 32px;
}

.s500-zew-footer__brand p {
    margin: 0;
    font-size: 20px;
    line-height: 30px;
    color: #fff;
}

.s500-zew-footer__kontakt {
    flex: 0 0 268px;
}

.s500-zew-footer__klienci {
    flex: 1 1 0;
    min-width: 0;
}

/* "Polityka Prywatności Serwis500.pl" w jednej linii */
.s500-zew-footer__serwisy {
    flex: 0 0 280px;
}

.s500-zew-footer .nsrv_footer_col a:hover {
    color: #fff;
    text-decoration: underline;
}

/* --- progi, te same co --s500-gutter ------------------------------------ */

/* stopka: cztery kolumny mieszcza sie od ~1300; ponizej dwie w dwoch rzedach
   (marka i kontakt, potem linki), az do jednej kolumny od 800 */
@media (max-width: 1300px) {
    .s500-zew-footer__cols {
        flex-wrap: wrap;
        row-gap: 48px;
    }

    .s500-zew-footer__brand,
    .s500-zew-footer__kontakt,
    .s500-zew-footer__klienci,
    .s500-zew-footer__serwisy {
        flex: 1 1 calc(50% - 24px);
        min-height: 0;
    }
}

/* od 1024 zdjecie nad tekstem, 206px wysokie */
@media (max-width: 1100px) {
    .s500-zew-about .ct {
        flex-direction: column;
    }

    .s500-zew-about__photo {
        order: -1;
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        height: 206px;
    }
}

/* 768 (2114:11593): naglowek dalej w jednym rzedzie, w pasku bez adresu;
   kafelki jeden pod drugim, 251px od gory zdjecia; mapa 496px nad karta,
   ktora nachodzi na nia od dolu o 103px */
@media (max-width: 800px) {
    .s500-zew-bar__addr {
        display: none;
    }

    .s500-zew-bar__in {
        flex-wrap: nowrap;
    }

    .s500-zew-hero {
        padding-bottom: 22px;
    }

    .s500-zew-hero__head {
        min-height: 174px;
    }

    .s500-zew-hero .s500-actions {
        flex-direction: column;
        gap: 19px;
    }

    .s500-zew-hero .s500-action {
        padding: 15px 47px;
    }

    .s500-zew-contact__body {
        flex-direction: column;
        align-items: stretch;
    }

    .s500-zew-contact__map {
        flex: 0 0 auto;
        height: 496px;
        min-height: 0;
        margin: 0 0 -103px;
    }

    .s500-zew-contact__map iframe {
        min-height: 0;
    }

    .s500-zew-contact__card {
        flex: 0 0 auto;
    }

    .s500-zew-contact__cols {
        flex-direction: row;
    }

    .s500-zew-contact__cols .s500-contact-list {
        flex: 1 1 0;
        min-width: 0;
    }

    /* nazwa (330px) obok adresu; na telefonie znow pod soba */
    .s500-zew-contact__id {
        flex-direction: row;
        align-items: flex-start;
        gap: 0;
    }

    .s500-zew-contact__name {
        flex: 0 1 330px;
        min-width: 0;
        min-height: 76px;
    }

    /* stopka jedna kolumna, co 48px; w marce tekst i ikony co 24 */
    .s500-zew-footer__cols {
        flex-direction: column;
        align-items: stretch;
    }

    .s500-zew-footer__brand,
    .s500-zew-footer__kontakt,
    .s500-zew-footer__klienci,
    .s500-zew-footer__serwisy {
        flex: 0 0 auto;
        min-height: 0;
    }

    .s500-zew-footer__brand {
        gap: 24px;
    }
}

/* 530 (2114:11747): logo, menu co 10px i sam koszyk w jednym rzedzie;
   oferta, "O firmie" i kontakt maja tu 48px z bokow, nie 24 jak naglowek */
@media (max-width: 600px) {
    .s500-zew-header__in {
        gap: 16px;
    }

    .s500-zew-header__logo img {
        max-height: 45px;
    }

    .s500-zew-header__cart-txt {
        display: none;
    }

    .s500-zew-header__nav {
        gap: 10px;
    }

    .s500-zew-contact__id {
        flex-direction: column;
        gap: 12px;
    }

    .s500-zew-contact__name {
        flex: 0 0 auto;
        min-height: 0;
    }

    /* kafelki hero 48px od krawedzi, choc tytul nad nimi ma 24 */
    .s500-zew-hero .s500-actions {
        padding: 0 24px;
    }

    .s500-zew-offer .ct,
    .s500-zew-about .ct,
    .s500-zew-contact .ct {
        padding: 0 48px;
    }

    .s500-zew-footer__kontakt,
    .s500-zew-footer__klienci,
    .s500-zew-footer__serwisy {
        flex: 1 1 100%;
    }
}

/* ponizej ramek: menu przechodzi pod logo, a sekcje wracaja do 24px */
@media (max-width: 480px) {
    .s500-zew-header__in {
        flex-wrap: wrap;
        justify-content: center;
        row-gap: 8px;
    }

    .s500-zew-header__nav {
        order: 3;
        flex: 1 1 100%;
        flex-wrap: wrap;
        justify-content: center;
        gap: 8px 14px;
    }

    .s500-zew-offer .ct,
    .s500-zew-about .ct,
    .s500-zew-contact .ct {
        padding: 0 var(--s500-gutter);
    }

    .s500-zew-hero .s500-actions {
        padding: 0;
    }

    .s500-zew-usluga {
        padding: 23px 24px;
    }
}

@media (max-width: 400px) {
    .s500-zew-header__nav {
        gap: 8px 12px;
    }

    .s500-zew-header__nav a {
        font-size: 14px;
    }
}