/*
Theme Name: Blocksy Child — Serwis Budowy Clone
Theme URI: https://github.com/hexgrid/serwisbudowyclone
Template: blocksy
Author: hexgrid
Description: Child theme Blocksy dla klona serwisbudowy.com. Customowe style, override szablonów Woo, modyfikacje hero.
Version: 0.15.13
Text Domain: blocksy-child
*/

/* ==========================================================================
   Brand tokens
   ========================================================================== */
:root {
    --sb-blue:        #3A003A;
    --sb-blue-dark:   #2E002E;
    --sb-blue-900:    #1A001A;
    --sb-ink:         #1B1919;
    --sb-muted:       #666565;
    --sb-surface:     #F3E6F3;
    --sb-border:      #DBB0DB;
    --sb-border-soft: #E5DEE5;
    --sb-accent:      #8A008B;
    --sb-accent-light:#C98ACA;
}

/* ==========================================================================
   Hero ([serwis_hero]) — F-019 editorial rework
   ========================================================================== */
.serwis-hero,
.entry-content .serwis-hero {
    margin: 0 !important;
    padding: 0 !important;
    background: var(--sb-blue-900) !important;
    color: #fff !important;
    position: relative;
    overflow: hidden !important;
    border-bottom: none !important;
}

.serwis-hero__accent {
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 6px !important;
    background: var(--sb-accent) !important;
    z-index: 3 !important;
}

.serwis-hero__inner {
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    height: clamp(560px, 64vh, 680px) !important;
}

/* --- media: mirrored so subject is on the right (visible) side --- */
.serwis-hero__media {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    overflow: hidden !important;
    background: var(--sb-blue-900) !important;
    width: auto !important;
    height: auto !important;
}
.serwis-hero__media::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    background:
        linear-gradient(
            100deg,
            rgba(26, 0, 26, 0.96) 0%,
            rgba(26, 0, 26, 0.86) 30%,
            rgba(26, 0, 26, 0.55) 60%,
            rgba(26, 0, 26, 0.30) 100%
        ),
        linear-gradient(
            180deg,
            rgba(26, 0, 26, 0) 60%,
            rgba(26, 0, 26, 0.55) 100%
        ) !important;
}
.serwis-hero__media img {
    position: absolute !important;
    top: -15% !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    height: 130% !important;
    object-fit: cover !important;
    filter: blur(3px) !important;
    transform: scale(1.05) translate3d(0, 0, 0);
    will-change: transform !important;
    display: block !important;
    margin: 0 !important;
    max-width: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* --- content --- */
.serwis-hero__content {
    position: relative !important;
    z-index: 2 !important;
    max-width: 1280px !important;
    margin: 0 auto !important;
    padding: 56px 48px 96px max(48px, calc((100vw - 1280px) / 2 + 48px)) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    height: 100% !important;
    box-sizing: border-box !important;
    min-height: 0 !important;
    overflow: visible !important;
    max-width: none !important;
}

.serwis-hero__eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    align-self: flex-start !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    color: var(--sb-accent-light) !important;
    background: transparent !important;
    padding: 0 0 0 14px !important;
    margin: 0 0 22px !important;
    border-left: 2px solid var(--sb-accent-light) !important;
    flex: 0 0 auto !important;
}

.serwis-hero__heading,
.entry-content .serwis-hero__heading {
    font-size: clamp(40px, 5.6vw, 76px) !important;
    line-height: 0.92 !important;
    font-weight: 900 !important;
    letter-spacing: -0.03em !important;
    color: #fff !important;
    margin: 0 !important;
    text-transform: none;
    word-break: keep-all;
    overflow-wrap: normal;
    hyphens: none;
    flex: 0 0 auto !important;
    max-width: 14ch !important;
}
.serwis-hero__heading-line {
    display: block !important;
}
.serwis-hero__heading-line:nth-child(2) {
    color: var(--sb-accent-light) !important;
}

.serwis-hero__sub,
.entry-content .serwis-hero__sub {
    font-size: clamp(16px, 1.2vw, 18px) !important;
    line-height: 1.55 !important;
    color: rgba(255, 255, 255, 0.78) !important;
    margin: 24px 0 32px !important;
    max-width: 46ch !important;
    flex: 0 0 auto !important;
}

.serwis-hero__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 16px 28px !important;
    margin: 0 0 24px !important;
    flex: 0 0 auto !important;
}

.serwis-hero__cta,
.entry-content .serwis-hero__cta {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    background: var(--sb-accent) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    padding: 16px 28px !important;
    border-radius: 4px !important;
    border: 0 !important;
    transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.serwis-hero__cta svg {
    width: 18px !important;
    height: 18px !important;
    transition: transform 0.2s ease;
}
.serwis-hero__cta:hover {
    background: #fff !important;
    color: var(--sb-ink) !important;
    transform: translateY(-1px);
}
.serwis-hero__cta:hover svg {
    transform: translateX(3px);
}

.serwis-hero__phone,
.entry-content .serwis-hero__phone {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
    text-decoration: none !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: -0.01em !important;
    border: 0 !important;
    padding: 0 !important;
    transition: color 0.15s ease;
    flex: 0 0 auto !important;
}
.serwis-hero__phone svg {
    width: 18px !important;
    height: 18px !important;
    color: var(--sb-accent-light) !important;
}
.serwis-hero__phone:hover {
    color: var(--sb-accent-light) !important;
}
.serwis-hero__phone-number {
    text-decoration: underline;
    text-decoration-color: rgba(201, 138, 202, 0.5);
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}

.serwis-hero__search {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 520px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    box-shadow: none !important;
    margin: 0 !important;
    flex: 0 0 auto !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.serwis-hero__search:focus-within {
    border-color: var(--sb-accent-light) !important;
    background: rgba(255, 255, 255, 0.12) !important;
}
.serwis-hero__search-icon {
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 0 0 14px !important;
    color: rgba(255, 255, 255, 0.55) !important;
}
.serwis-hero__search-input {
    flex: 1 1 auto !important;
    border: 0 !important;
    background: transparent !important;
    padding: 12px 14px !important;
    font-size: 14px !important;
    color: #fff !important;
    outline: none !important;
    min-width: 0 !important;
    border-radius: 0 !important;
}
.serwis-hero__search-input::placeholder {
    color: rgba(255, 255, 255, 0.50) !important;
}
.serwis-hero__search-submit {
    flex: 0 0 auto !important;
    border: 0 !important;
    cursor: pointer !important;
    background: transparent !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 0 18px !important;
    height: 100% !important;
    align-self: stretch !important;
    font-weight: 700 !important;
    font-size: 12px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    border-radius: 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
    transition: background 0.15s ease, color 0.15s ease;
}
.serwis-hero__search-submit:hover {
    background: var(--sb-accent) !important;
    color: #fff !important;
}

@media (max-width: 900px) {
    .serwis-hero__inner {
        height: auto !important;
        min-height: 540px !important;
    }
    .serwis-hero__content {
        padding: 56px 24px 88px 30px !important;
    }
    .serwis-hero__media::after {
        background: linear-gradient(
            180deg,
            rgba(26, 0, 26, 0.55) 0%,
            rgba(26, 0, 26, 0.92) 100%
        ) !important;
    }
    .serwis-hero__heading,
    .entry-content .serwis-hero__heading {
        font-size: clamp(36px, 11vw, 60px) !important;
    }
    .serwis-hero__actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }
    .serwis-hero__cta {
        justify-content: center !important;
    }
    .serwis-hero__phone {
        justify-content: center !important;
    }
}

/* ==========================================================================
   USP strip ([serwis_usp]) — pill card overlapping hero
   ========================================================================== */
.serwis-usp,
.entry-content .serwis-usp {
    max-width: 1320px !important;
    margin: -44px auto 0 !important;
    padding: 0 20px !important;
    position: relative;
    z-index: 2;
}
.serwis-usp__grid,
.entry-content .serwis-usp__grid,
ul.serwis-usp__grid {
    list-style: none !important;
    margin: 0 !important;
    padding: 20px 32px !important;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0 !important;
    background: #fff !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 34px -10px rgba(27, 25, 25, 0.16), 0 2px 6px rgba(27, 25, 25, 0.04) !important;
    overflow: hidden !important;
    border: none !important;
}
ul.serwis-usp__grid > li.serwis-usp__item {
    margin: 0 !important;
    /* 26 px z mockupu: separator → kółko ikony to 20 px, plus 6 px na kreskę i luz. */
    padding: 0 20px !important;
    list-style: none !important;
    background: none !important;
}
ul.serwis-usp__grid > li.serwis-usp__item:first-child { padding-left: 0 !important; }
ul.serwis-usp__grid > li.serwis-usp__item:last-child { padding-right: 0 !important; }
ul.serwis-usp__grid > li.serwis-usp__item::before,
ul.serwis-usp__grid > li.serwis-usp__item::marker {
    content: none !important;
    display: none !important;
}
.serwis-usp__item {
    display: flex !important;
    gap: 16px !important;
    align-items: center !important;
    background: #fff;
}
/* Hairline między pozycjami — w mockupie trzy kreski przy x 716/1125/1562. */
.serwis-usp__item + .serwis-usp__item { border-left: 1px solid rgba(27, 25, 25, 0.09) !important; }

.serwis-usp__icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50% !important;
    /* #f6eef7 z mockupu = akcent przy 7% krycia na bieli. */
    background: rgba(138, 0, 139, 0.07) !important;
    color: var(--sb-accent) !important;
}
.serwis-usp__icon svg { width: 22px; height: 22px; display: block; }

.serwis-usp__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.serwis-usp__title {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: var(--sb-ink) !important;
    line-height: 1.3 !important;
}
.serwis-usp__desc {
    font-size: 11.5px !important;
    color: var(--sb-muted) !important;
    line-height: 1.5 !important;
}

@media (max-width: 1024px) and (min-width: 561px) {
    .serwis-usp__grid,
    .entry-content .serwis-usp__grid,
    ul.serwis-usp__grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 1px !important;
        padding: 0 !important;
        border-radius: 20px !important;
        overflow: hidden !important;
        background-color: transparent !important;
        background-image:
            linear-gradient(90deg, transparent 0%, rgba(27, 25, 25, 0.16) 14%, rgba(27, 25, 25, 0.16) 86%, transparent 100%),
            linear-gradient(180deg, transparent 0%, rgba(27, 25, 25, 0.16) 14%, rgba(27, 25, 25, 0.16) 86%, transparent 100%) !important;
        background-position: center center !important;
        background-size: 100% 100% !important;
        background-repeat: no-repeat !important;
    }
    ul.serwis-usp__grid > li.serwis-usp__item {
        background: #fff !important;
        padding: 22px 28px !important;
        align-items: flex-start !important;
        gap: 14px !important;
    }
}
@media (max-width: 560px) {
    .serwis-usp,
    .entry-content .serwis-usp {
        margin-top: -24px !important;
        padding: 0 10px !important;
        max-width: none !important;
        position: relative !important;
        z-index: 4 !important;
        margin-bottom: 22px !important;
    }
    .serwis-usp .serwis-usp__grid,
    .entry-content .serwis-usp__grid,
    ul.serwis-usp__grid,
    .serwis-usp__grid {
        display: grid !important;
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 0 !important;
        min-height: 90px !important;
        padding: 0 4px !important;
        border-radius: 14px !important;
        border: 1px solid rgba(58, 0, 58, 0.08) !important;
        overflow: hidden !important;
        background: #fff !important;
        background-image: none !important;
        box-shadow: 0 8px 24px -8px rgba(26, 0, 26, 0.22) !important;
        position: relative !important;
    }
    .serwis-usp__grid::before,
    .serwis-usp__grid::after { content: none !important; }
    ul.serwis-usp__grid > li.serwis-usp__item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: center !important;
        gap: 6px !important;
        min-height: 90px !important;
        padding: 10px 3px 9px !important;
        background: #fff !important;
        background-image: none !important;
        border: none !important;
        border-right: 1px solid rgba(58, 0, 58, 0.08) !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        position: relative !important;
        z-index: 1 !important;
        min-width: 0 !important;
    }
    ul.serwis-usp__grid > li.serwis-usp__item:last-child {
        border-right: none !important;
    }
    .serwis-usp__icon {
        width: 30px !important;
        height: 30px !important;
        flex: 0 0 30px !important;
        margin-top: 0 !important;
        border-radius: 50% !important;
        border: none !important;
        background: rgba(58, 0, 58, 0.07) !important;
        background-image: none !important;
        color: var(--sb-blue) !important;
        box-shadow: none !important;
    }
    .serwis-usp__icon svg { width: 15px !important; height: 15px !important; }
    .serwis-usp__text {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        min-width: 0 !important;
    }
    .serwis-usp__title {
        display: block !important;
        max-width: 11ch !important;
        margin: 0 auto !important;
        font-size: 9px !important;
        color: var(--sb-ink) !important;
        line-height: 1.15 !important;
        font-weight: 700 !important;
        letter-spacing: 0 !important;
        text-align: center !important;
    }
    .serwis-usp__desc {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}

/* ==========================================================================
   About brand block ([serwis_about]) — asymmetric split panel (F-019)
   ========================================================================== */
.serwis-about,
.entry-content .serwis-about {
    position: relative !important;
    background-color: #fcfcfc !important;
    /* Siatka z mockupu: skok 27 px (41 px przy 2172) i fioletowa kropka na każdym
       przecięciu — same linie dawały inny odcień niż wzór na zrzucie. */
    background-image:
        radial-gradient(circle, rgba(138, 0, 139, 0.16) 1.4px, transparent 1.7px),
        linear-gradient(rgba(27, 25, 25, 0.016) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 25, 25, 0.016) 1px, transparent 1px) !important;
    background-size: 27px 27px, 27px 27px, 27px 27px !important;
    /* Kropka jest środkiem swojego kafla, linie leżą na jego krawędzi — przesunięcie
       o pół oczka sadza kropki dokładnie na przecięciach. */
    background-position: -13.5px -13.5px, 0 0, 0 0 !important;
    padding: clamp(60px, 6.5vw, 96px) 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
.serwis-about__inner {
    position: relative;
    z-index: 1;
    /* Ta sama miara co siatka „Nasze kategorie": 1280 px bez wewnętrznego paddingu,
       żeby krawędzie kart trafiały w te same 80 px i 1360 px. */
    width: min(1280px, calc(100% - 64px));
    max-width: none;
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 660fr) minmax(0, 615fr);
    gap: 16px;
    align-items: stretch;
}
/* Obie kolumny leżą bez własnego tła wprost na siatce sekcji — pomiar mockupu:
   660 × 382 i 615 × 382, przerwa 16 px. Promień zostaje: przycina rysunek
   techniczny i raster kropek do obrysu kolumny. */
.serwis-about__media {
    position: relative;
    overflow: hidden;
    width: 100%;
    min-height: 0;
    padding: 94px 40px 46px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
/* Rysunek techniczny wewnątrz karty — w mockupie stożek, łuk, ukośne kreski i krzyż
   leżą na białym tle karty, nie tylko na tle sekcji. */
.serwis-about__media::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Jedna klatka wzoru na kartę, bez kafelkowania — w mockupie dekoracje
       (stożek, łuk, ukośne kreski, krzyż) występują pojedynczo. */
    background-image: url("assets/about-pattern.svg");
    background-size: 360px 360px;
    background-position: 0 0;
    background-repeat: repeat;
    opacity: 0.5;
    -webkit-mask-image: radial-gradient(ellipse 46% 42% at 50% 42%, transparent 55%, #000 100%);
    mask-image: radial-gradient(ellipse 46% 42% at 50% 42%, transparent 55%, #000 100%);
    pointer-events: none;
    z-index: 0;
}
.serwis-about__media > * { position: relative; z-index: 1; }
/* Raster kropek w górnej części karty — w mockupie leży nad wordmarkiem,
   po prawej stronie, ten sam raster co w prawym panelu. */
.serwis-about__deco-grid {
    position: absolute;
    top: 24px;
    right: 40px;
    width: 74px;
    height: 40px;
    background-image: radial-gradient(circle, rgba(138, 0, 139, 0.22) 1.1px, transparent 1.5px);
    background-size: 12px 12px;
    pointer-events: none;
    z-index: 0 !important;
}
.serwis-about__media .serwis-about__img,
.serwis-about__media img {
    display: block;
    width: min(100%, 395px);
    height: auto;
    margin-bottom: 41px;
}
.serwis-about__stats-divider {
    display: flex;
    align-items: center;
    width: 38px;
    height: 2px;
    margin-bottom: 38px;
}
.serwis-about__stats-divider::before {
    content: "";
    width: 40px;
    height: 3px;
    background: var(--sb-accent);
    border-radius: 2px;
    flex: 0 0 auto;
}
.serwis-about__stats-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    margin-left: 4px;
    background: linear-gradient(90deg, rgba(27, 25, 25, 0.20), transparent);
}
.serwis-about__stats {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}
/* Kafel statu: wartość i etykieta z lewej, kreskowa ikona z prawej — jak w mockupie.
   Bez białego wypełnienia, żeby siatka sekcji szła pod spodem; ramkę trzyma hairline. */
.serwis-about__stat {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 18px;
    border: 1px solid rgba(27, 25, 25, 0.10);
    border-radius: 12px;
}
.serwis-about__stat-text { display: flex; flex-direction: column; gap: 15px; min-width: 0; }
/* Separator jest ukośny, nie pionowy — w mockupie kreska pochyla się w prawo. */
.serwis-about__stat-icon {
    position: relative;
    flex: 0 0 30px;
    padding-left: 12px;
    color: var(--sb-accent);
    opacity: 0.6;
}
.serwis-about__stat-icon::before {
    content: "";
    position: absolute;
    left: 2px;
    top: -4px;
    bottom: -4px;
    width: 1px;
    background: rgba(27, 25, 25, 0.12);
    transform: rotate(14deg);
}
.serwis-about__stat-icon svg { width: 30px; height: 30px; display: block; }
.serwis-about__stat-value {
    font-size: 30px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    color: var(--sb-ink);
}
.serwis-about__stat-value .serwis-about__stat-plus {
    color: var(--sb-accent);
    padding: 0 2px;
}
.serwis-about__stat-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    white-space: nowrap;
    color: var(--sb-ink);
    opacity: 0.75;
}

.serwis-about__content {
    position: relative;
    overflow: hidden;
    padding: 36px 40px;
    border-radius: 20px;
    color: var(--sb-ink);
}
.serwis-about__eyebrow {
    margin: 0 0 22px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sb-accent);
}
.serwis-about__heading {
    margin: 0 0 16px;
    font-size: 36px;
    line-height: 1.15;
    font-weight: 800;
    color: var(--sb-ink);
    letter-spacing: -0.01em;
}
.serwis-about__divider {
    display: flex;
    align-items: center;
    margin: 0 0 22px;
    height: 2px;
}
.serwis-about__divider::before {
    content: "";
    width: 38px;
    height: 2px;
    background: var(--sb-accent);
    border-radius: 2px;
    flex: 0 0 auto;
}

.serwis-about__lead {
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--sb-ink);
}
.serwis-about__lead strong { font-weight: 700; }

/* Tablet: dwie karty obok siebie są wąskie, więc tekst łamie się gęściej i sekcja
   przerasta 0,85 wysokości viewportu — ścinamy wyściółkę i rytm. */
@media (max-width: 1100px) and (min-width: 768px) {
    .serwis-about__media { padding: 30px 26px 22px !important; }
    .serwis-about__content { padding: 26px 26px !important; }
    .serwis-about__media .serwis-about__img,
    .serwis-about__media img { margin-bottom: 22px !important; }
    .serwis-about__stats-divider { margin-bottom: 34px !important; }
    .serwis-about__deco-shield { width: 62px !important; height: 62px !important; }
    .serwis-about__deco-shield svg { width: 35px !important; height: 35px !important; }
    .serwis-about__deco-dots { right: 96px !important; width: 60px !important; height: 60px !important; }
}

/* Dekoracje prawej karty z mockupu: raster kropek i jasne kółko z tarczą (170 px). */
.serwis-about__deco-dots {
    position: absolute;
    top: 20px;
    right: 118px;
    width: 76px;
    height: 76px;
    background-image: radial-gradient(circle, rgba(138, 0, 139, 0.20) 1px, transparent 1.4px);
    background-size: 14px 14px;
    pointer-events: none;
    z-index: 0;
}
.serwis-about__deco-shield {
    position: absolute;
    top: 18px;
    right: 18px;
    display: grid;
    place-items: center;
    width: 78px;
    height: 78px;
    border-radius: 50%;
    background: rgba(138, 0, 139, 0.05);
    color: var(--sb-accent);
    pointer-events: none;
    z-index: 0;
}
.serwis-about__deco-shield svg { width: 44px; height: 44px; }
.serwis-about__content > :not(.serwis-about__deco-dots):not(.serwis-about__deco-shield) {
    position: relative;
    z-index: 1;
}
.serwis-about__body {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.65;
    color: var(--sb-muted);
}
/* CTA i telefon w jednym rzędzie — w mockupie stoją obok siebie. */
.serwis-about__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
}
.serwis-about__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: var(--sb-accent);
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 12.5px;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 2px 8px rgba(138, 0, 139, 0.25);
}
.serwis-about__cta svg { width: 18px; height: 18px; }
.serwis-about__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px rgba(138, 0, 139, 0.45);
    background: var(--sb-blue);
}
.serwis-about__cta:focus-visible {
    outline: 2px solid var(--sb-accent);
    outline-offset: 3px;
}
.serwis-about__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sb-ink) !important;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
}
.serwis-about__phone svg { width: 18px; height: 18px; color: var(--sb-accent); }
.serwis-about__phone:hover { color: var(--sb-accent) !important; }

@media (max-width: 1023px) and (min-width: 768px) {
    .serwis-about { padding: 72px 0 !important; }
    .serwis-about__inner {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }
    .serwis-about__media {
        max-width: 420px;
    }
    .serwis-about__content { padding-left: 24px; }
    .serwis-about__heading {
    max-width: 405px; font-size: clamp(24px, 3.2vw, 32px); }
    .serwis-about__lead { font-size: 16px; }
}

@media (max-width: 767px) {
    /* Mobile: pionowy split — ciemny panel media (białe logo + staty) nad białą
       treścią; szkice off (kolidowały z logo na wąskim ekranie). */
    .serwis-about,
    .entry-content .serwis-about {
        padding: 0 !important;
        background-color: #fff !important;
    }
    .serwis-about::before {
        display: none;
    }
    /* Ciemny panel idzie od krawędzi do krawędzi — kontener sekcji traci tu
       boczne marginesy, a treść pod nim wnosi własny padding. */
    .serwis-about__inner {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 0;
        padding: 0 0 36px;
    }
    .serwis-about__media {
        transform: none;
        aspect-ratio: auto;
        width: 100%;
        max-width: 100%;
        margin: 0 0 26px;
        padding: 34px 16px 24px;
        border-radius: 0;
        background-color: var(--sb-blue-dark);
        background-image:
            linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
            linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
        background-size: 48px 48px;
    }
    .serwis-about__media::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 56px;
        height: 3px;
        background: var(--sb-accent-light);
    }
    .serwis-about__media .serwis-about__img,
    .serwis-about__media img {
        width: min(52%, 200px);
        margin: 0 0 26px;
        filter: brightness(0) invert(1);
    }
    .serwis-about__stats-divider { display: none; }
    .serwis-about__stats {
        width: 100%;
        padding-top: 20px;
        border-top: 1px solid rgba(255, 255, 255, 0.18);
        justify-content: space-between;
        gap: 12px;
    }
    /* Komórka ma tu ~100 px: ikona wchodzi nad liczbę zamiast obok niej,
       inaczej nachodzi na etykietę. */
    .serwis-about__stat {
        flex-direction: column-reverse;
        justify-content: flex-start;
        border: 0;
        padding: 0;
        gap: 10px;
        align-items: center;
        text-align: center;
    }
    .serwis-about__stat-text { gap: 4px; align-items: center; }
    .serwis-about__stat-icon {
        flex: 0 0 auto;
        padding-left: 0;
        opacity: 0.75;
        color: var(--sb-accent-light);
    }
    .serwis-about__stat-icon::before { display: none; }
    .serwis-about__stat-icon svg { width: 22px; height: 22px; }
    .serwis-about__stat-value {
        font-size: 22px;
        color: #fff;
    }
    .serwis-about__stat-value .serwis-about__stat-plus { color: var(--sb-accent-light); }
    /* Komórka ma ~105 px, a etykiety w sv/sl/hu są dłuższe niż polskie —
       bez zawijania wychodziły poza kafel o kilkadziesiąt pikseli. */
    .serwis-about__stat-label {
        font-size: 9.5px;
        letter-spacing: 0.1em;
        white-space: normal;
        line-height: 1.3;
        color: var(--sb-accent-light);
        opacity: 1;
    }
    .serwis-about__content {
        padding-left: 16px;
        padding-right: 16px;
    }
    .serwis-about__eyebrow { margin: 0 0 10px; font-size: 11.5px; letter-spacing: 0.14em; }
    .serwis-about__heading {
        font-size: 25px;
        line-height: 1.2;
        letter-spacing: -0.015em;
        margin: 0 0 14px;
    }
    .serwis-about__divider { margin: 0 0 14px; height: 2px; }
    .serwis-about__divider::before { width: 36px; height: 2px; }
    .serwis-about__lead { font-size: 14.5px; line-height: 1.5; margin: 0 0 10px; }
    .serwis-about__body { font-size: 13.5px; line-height: 1.55; margin: 0 0 20px; color: var(--sb-muted); }
    .serwis-about__actions {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap;
    }
    .serwis-about__cta {
        padding: 12px 22px;
        font-size: 14px;
    }
    .serwis-about__phone {
        padding: 6px 0;
        font-size: 14px;
    }
}

/* ========================================================================== 
   Kompaktowy katalog kategorii ([serwis_categories])
   ========================================================================== */
#kategorie.wp-block-group,
.entry-content #kategorie.wp-block-group {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border-bottom: 1px solid var(--sb-border-soft) !important;
}

.serwis-categories,
.entry-content .serwis-categories {
    position: relative !important;
    display: block !important;
    width: min(1280px, calc(100% - 64px)) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 30px 0 32px !important;
}
.serwis-categories__head {
    display: block !important;
    margin: 0 0 30px !important;
    text-align: center !important;
}
.serwis-categories__eyebrow {
    display: block !important;
    margin: 0 0 14px !important;
    color: var(--sb-accent) !important;
    font-family: 'IBM Plex Mono', monospace !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    letter-spacing: 0.17em !important;
    text-transform: uppercase !important;
}
.serwis-categories .serwis-categories__heading,
.entry-content .serwis-categories__heading {
    margin: 0 !important;
    color: var(--sb-ink) !important;
    font-size: clamp(28px, 2.8vw, 40px) !important;
    font-weight: 800 !important;
    line-height: 1.08 !important;
    letter-spacing: -0.03em !important;
    text-align: center !important;
}
/* Kreska pod nagłówkiem — w mockupie krótki fioletowy myślnik, wyśrodkowany. */
.serwis-categories__divider {
    width: 46px !important;
    height: 2px !important;
    margin: 16px auto 0 !important;
    background: var(--sb-accent) !important;
    border-radius: 2px !important;
}

/* Rastry kropek — pozycje, promienie i krycie każdej kropki wyciągnięte wprost
   z mockupu (66 kropek po lewej, 171 po prawej) i zapisane jako SVG. Radial-gradient
   nie odda tego wzoru: kropki mają różne rozmiary i krycie, a klaster wygasza się
   po przekątnej, nie liniowo. */
.serwis-categories::before,
.serwis-categories::after {
    content: "" !important;
    position: absolute !important;
    pointer-events: none !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    z-index: 0 !important;
}
/* Treść nad rastrem — w mockupie kafle i nagłówek zasłaniają kropki. */
.serwis-categories__head,
.serwis-categories .serwis-categories__grid {
    position: relative !important;
    z-index: 1 !important;
}
.serwis-categories::before {
    left: -75px !important;
    top: -58px !important;
    width: 134px !important;
    height: 307px !important;
    background-image: url("assets/kropki-lewo.svg") !important;
}
.serwis-categories::after {
    right: -65px !important;
    top: -95px !important;
    width: 270px !important;
    height: 391px !important;
    background-image: url("assets/kropki-prawo.svg") !important;
}

.serwis-categories .serwis-categories__grid,
.entry-content .serwis-categories__grid,
ul.serwis-categories__grid {
    /* Flex, nie grid: katalog ma 7 kategorii, a przy sztywnych czterech kolumnach
       ostatni rząd zostawiał dziurę po prawej. Zawijanie z `center` domyka rząd. */
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.serwis-categories .serwis-categories__item,
ul.serwis-categories__grid > li.serwis-categories__item {
    flex: 0 0 calc((100% - 3 * 20px) / 4) !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: none !important;
}
ul.serwis-categories__grid > li.serwis-categories__item::before,
ul.serwis-categories__grid > li.serwis-categories__item::marker {
    content: none !important;
    display: none !important;
}
.serwis-categories a.serwis-categories__link,
.entry-content a.serwis-categories__link {
    display: flex !important;
    width: 100% !important;
    height: 75px !important;
    align-items: stretch !important;
    color: var(--sb-ink) !important;
    background: #fff !important;
    border: 1px solid rgba(27, 25, 25, 0.08) !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition: border-color 0.2s ease !important;
}
.serwis-categories__icon {
    display: grid !important;
    flex: 0 0 72px !important;
    place-items: center !important;
}
.serwis-categories__icon svg {
    box-sizing: border-box !important;
    width: 44px !important;
    height: 44px !important;
    padding: 11px !important;
    color: var(--sb-accent) !important;
    background: rgba(138, 0, 139, 0.07) !important;
    border-radius: 50% !important;
    transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease !important;
}
.serwis-categories .serwis-categories__name {
    display: flex !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 8px 5px 8px 2px !important;
    color: var(--sb-ink) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    line-height: 1.18 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
}
.serwis-categories__arrow {
    display: grid !important;
    flex: 0 0 24px !important;
    place-items: center !important;
    color: var(--sb-accent) !important;
}
.serwis-categories__arrow svg {
    width: 13px !important;
    height: 13px !important;
    transition: transform 0.2s ease !important;
}
/* Kafel „Wszystkie produkty" nie jest kategorią — wypełniona ikona i obramowanie
   w akcencie odróżniają wyjście do sklepu od siedmiu gałęzi katalogu. */
.serwis-categories a.serwis-categories__link--all {
    border-color: var(--sb-accent-light) !important;
}
.serwis-categories a.serwis-categories__link--all .serwis-categories__icon svg {
    color: #fff !important;
    background: var(--sb-accent) !important;
}

.serwis-categories a.serwis-categories__link:hover,
.serwis-categories a.serwis-categories__link:focus-visible {
    border-color: var(--sb-accent-light) !important;
    outline: none !important;
}
.serwis-categories a.serwis-categories__link:hover .serwis-categories__icon svg,
.serwis-categories a.serwis-categories__link:focus-visible .serwis-categories__icon svg {
    color: #fff !important;
    background: var(--sb-accent) !important;
    transform: scale(1.04) !important;
}
.serwis-categories a.serwis-categories__link:hover .serwis-categories__arrow svg,
.serwis-categories a.serwis-categories__link:focus-visible .serwis-categories__arrow svg {
    transform: translateX(2px) !important;
}

@media (max-width: 760px) {
    .serwis-categories,
    .entry-content .serwis-categories {
        width: calc(100% - 24px) !important;
        padding: 22px 0 24px !important;
    }
    .serwis-categories__head {
        margin-bottom: 12px !important;
    }
    .serwis-categories .serwis-categories__heading,
    .entry-content .serwis-categories__heading {
        font-size: 22px !important;
    }
    .serwis-categories .serwis-categories__grid,
    .entry-content .serwis-categories__grid,
    ul.serwis-categories__grid {
        gap: 6px !important;
    }
    .serwis-categories .serwis-categories__item,
    ul.serwis-categories__grid > li.serwis-categories__item {
        flex-basis: calc((100% - 6px) / 2) !important;
    }
    .serwis-categories a.serwis-categories__link,
    .entry-content a.serwis-categories__link {
        height: 66px !important;
    }
    .serwis-categories__icon {
        flex-basis: 51px !important;
    }
    .serwis-categories__icon svg {
        width: 36px !important;
        height: 36px !important;
        padding: 8px !important;
    }
    .serwis-categories .serwis-categories__name,
    .entry-content .serwis-categories__name {
        padding: 7px 3px 7px 0 !important;
        font-size: 11px !important;
        line-height: 1.15 !important;
    }
    .serwis-categories__arrow {
        flex-basis: 18px !important;
    }
    .serwis-categories__arrow svg {
        width: 11px !important;
        height: 11px !important;
    }
}

/* ==========================================================================
   Header (F-018) — e-commerce pattern (Morele/x-kom inspired)
   utility strip → brand+search → category nav
   ========================================================================== */

.sh {
    font-family: 'Archivo', system-ui, sans-serif;
    /* display: contents removes .sh box but keeps ARIA role="banner".
       Children (.sh-top, .sh-brand, .sh-navbar) become direct kids of
       #main-container, so individual sticky elements stick to viewport
       through the entire scroll — not constrained to .sh bounds. */
    display: contents;
}
.sh-contain {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
}

/* --- 1. Utility strip --- */
.sh-top {
    background: var(--sb-blue-900);
    color: #fff;
    font-size: 12px;
    line-height: 1;
    letter-spacing: 0.02em;
}
.sh-top > .sh-contain {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 36px;
}
.sh-top__left {
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    white-space: nowrap;
}
.sh-top__right {
    display: flex;
    align-items: center;
    gap: 0;
}
.sh-top__item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    white-space: nowrap;
    font-weight: 500;
    padding: 0 14px;
}
.sh-top__sep {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.15);
}
.sh-top__phone { color: #fff; font-weight: 700; }
a.sh-top__phone:hover { color: var(--sb-accent-light); }
.sh-top__icon { width: 13px; height: 13px; flex: 0 0 13px; color: var(--sb-accent-light); }

/* --- 2. Brand bar (sticky top: 0) --- */
.sh-brand {
    background: #fff;
    border-bottom: 1px solid var(--sb-border);
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.sh.is-scrolled .sh-brand {
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.08);
}
.sh-brand > .sh-contain {
    display: flex;
    align-items: center;
    gap: 28px;
    height: 80px;
}

.sh-logo {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.sh-logo__bar {
    width: 5px;
    height: 40px;
    background: var(--sb-accent);
    border-radius: 2px;
    flex: 0 0 5px;
}
.sh-logo__text {
    font-weight: 900;
    font-size: 36px;
    color: var(--sb-blue-900);
    letter-spacing: 0.04em;
    line-height: 1;
}
.sh-logo__dot {
    font-weight: 700;
    font-size: 17px;
    color: var(--sb-accent);
    letter-spacing: 0.03em;
    align-self: flex-end;
    margin-bottom: 3px;
    margin-left: -6px;
}
.sh-logo--light .sh-logo__text { color: var(--sb-blue-900); }

/* Search bar */
.sh-search {
    flex: 1 1 auto;
    min-width: 0;
}
/* Selektory z dwiema klasami (0,2,0) biją reguły pól i przycisków Blocksy
   (`input:is([type="search"])`, `[type="submit"]`), które inaczej narzucają
   50 px wysokości i padding przycisku. */
.sh-search__box {
    display: flex;
    align-items: center;
    height: 48px;
    border: 2px solid #DBB0DB;
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.sh-search__box:focus-within {
    border-color: var(--sb-accent);
    box-shadow: 0 0 0 3px rgba(138, 0, 139, 0.15);
}
.sh-search__box .sh-search__input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 100%;
    border: 0;
    border-radius: 6px 0 0 6px;
    padding: 0 20px;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--sb-ink);
    background: transparent;
    outline: none;
}
.sh-search__input::placeholder { color: #999; font-weight: 400; }
/* Przycisk nachodzi na obrys ramki (ujemny margines = grubość borderu), żeby
   między fioletem a ramką nie było jasnej szczeliny na zaokrągleniu. */
.sh-search__box .sh-search__btn {
    flex: 0 0 56px;
    height: calc(100% + 4px);
    margin: -2px -2px -2px 0;
    min-height: 0;
    padding: 0;
    border: 0;
    border-radius: 0 8px 8px 0;
    background: var(--sb-accent);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}
.sh-search__box .sh-search__btn:hover { background: #620063; }
.sh-search__btn svg { width: 22px; height: 22px; display: block; }

/* Lupa w pasku akcji — tylko ≤689, otwiera panel `.sh-search` pod belką. */
.sh-search-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: var(--sb-accent);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s ease;
}
.sh-search-toggle:hover,
.sh.is-search-open .sh-search-toggle { background: #620063; }
.sh-search-toggle svg { width: 22px; height: 22px; display: block; }
/* Morph lupa → X na jednym SVG: koło zapada się do środka, rączka (odcinek
   przekątnej 3,3–21,21) wydłuża się w pełną kreskę X, druga przekątna wyrasta
   ze środka. Wszystko na `stroke-dasharray` (4 wartości = interpolowalne),
   bo `d` nie animuje się w Safari. */
.sh-search-toggle__ring {
    transform-origin: 11px 11px;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s ease;
}
.sh-search-toggle__stem {
    stroke-dasharray: 0 0 6.15 40;
    transition: stroke-dasharray 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.sh-search-toggle__cross {
    stroke-dasharray: 0 8.49 0 40;
    transition: stroke-dasharray 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.sh.is-search-open .sh-search-toggle__ring { transform: scale(0); opacity: 0; }
.sh.is-search-open .sh-search-toggle__stem { stroke-dasharray: 0 4.24 16.97 40; }
.sh.is-search-open .sh-search-toggle__cross { stroke-dasharray: 0 0 16.97 40; }

/* Action buttons (phone, account, cart) */
.sh-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sh-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 56px;
    height: 56px;
    padding: 6px 8px 4px;
    color: var(--sb-ink);
    text-decoration: none;
    border-radius: 8px;
    border: 0;
    background: transparent;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    position: relative;
}
.sh-action:hover {
    color: var(--sb-blue);
    background: rgba(58, 0, 58, 0.06);
}
.sh-action__icon { width: 24px; height: 24px; display: block; flex: 0 0 24px; }
.sh-action__label {
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    white-space: nowrap;
}
.sh-action__badge {
    position: absolute;
    top: 2px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: var(--sb-accent);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
    box-shadow: 0 0 0 2px #fff;
}

.sh-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 0;
}
.sh-burger__line {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--sb-ink);
    border-radius: 1px;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* --- 3. Navigation bar (sticky top: 80px = under brand bar)
       Contextual phase shift:
       - Default (rest): solid brand plum with depth gradient + magenta inner glow.
         Brand-strong; no real "glass" because nothing meaningful sits behind.
       - Scrolled: phases to translucent + blur + saturate when overlapping hero/content.
       backdrop-filter is ALWAYS present (blur(0) at rest) so the transition
       between phases interpolates smoothly instead of snapping. --- */
.sh-navbar {
    background-color: rgba(58, 0, 58, 0.97);
    background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.00) 28%,
        rgba(0, 0, 0, 0.00) 70%,
        rgba(0, 0, 0, 0.10) 100%
    );
    -webkit-backdrop-filter: blur(0px) saturate(100%);
            backdrop-filter: blur(0px) saturate(100%);
    border-top: 1px solid rgba(201, 138, 202, 0.22);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04),
        inset 0 0 80px rgba(138, 0, 139, 0.06);
    position: sticky;
    top: 80px;
    z-index: 99;
    transition: background-color 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                -webkit-backdrop-filter 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                        backdrop-filter 0.32s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1);
}
.sh.is-scrolled .sh-navbar {
    background-color: rgba(58, 0, 58, 0.58);
    -webkit-backdrop-filter: blur(22px) saturate(180%);
            backdrop-filter: blur(22px) saturate(180%);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        inset 0 0 80px rgba(138, 0, 139, 0.04),
        0 1px 0 rgba(0, 0, 0, 0.12);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .sh.is-scrolled .sh-navbar { background-color: rgba(58, 0, 58, 0.92); }
}
.sh-navbar > .sh-contain {
    display: flex;
    align-items: center;
    height: 48px;
    gap: 0;
}

/* Category trigger + dropdown */
.sh-cat-wrap {
    position: relative;
    flex: 0 0 auto;
}
.sh-cat-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 48px;
    padding: 0 20px;
    margin-right: 4px;
    background: rgba(0, 0, 0, 0.18);
    border: 0;
    color: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.15s ease;
    white-space: nowrap;
}
.sh-cat-trigger:hover,
.sh-cat-wrap:hover .sh-cat-trigger { background: rgba(0, 0, 0, 0.28); }
.sh-cat-trigger svg { width: 18px; height: 18px; flex: 0 0 18px; }
.sh-cat-trigger__chevron {
    width: 14px; height: 14px; flex: 0 0 14px; opacity: 0.6;
    transition: transform 0.2s ease;
}
.sh-cat-wrap:hover .sh-cat-trigger__chevron { transform: rotate(180deg); }

/* Panel kategorii — dwie kolumny w jednym prostokącie o STAŁEJ wysokości.
   Wcześniej panel rósł i kurczył się razem z wybraną kategorią, więc przy
   krótszej kolumnie zostawała martwa biel. Teraz wszystkie panele podkategorii
   leżą w jednej komórce gridu, więc `.sh-cat-panes` mierzy się do najwyższego
   z nich niezależnie od tego, który jest widoczny — kształt się nie rusza. */
.sh-cat-dropdown {
    --sb-cat-foot: 52px; /* wspólna wysokość obu stopek, żeby kreski się zeszły */
    position: absolute;
    top: 100%;
    left: 0;
    display: flex;
    width: 616px;
    max-width: calc(100vw - 48px);
    max-height: min(calc(100vh - 190px), 620px); /* 190px = trzy paski headera + oddech */
    background: #fff;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    /* `opacity: 0` samo nie wyłącza trafień kursora — bez tego zamknięty panel
       zostaje niewidzialnym blokiem nad hero i najechanie na niego otwiera menu. */
    pointer-events: none;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 200;
}
.sh-cat-wrap:hover .sh-cat-dropdown,
.sh-cat-wrap.is-open .sh-cat-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Lewa kolumna — kategorie główne */
.sh-cat-nav {
    display: flex;
    flex-direction: column;
    flex: 0 0 300px;
    border-right: 1px solid var(--sb-border);
}
.sh-cat-list {
    flex: 1 1 auto;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.sh-cat-list__link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px 10px 20px;
    color: var(--sb-ink);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    transition: background 0.15s ease, color 0.15s ease;
}
.sh-cat-list__link:hover,
.sh-cat-list__link.is-active {
    background: var(--sb-surface);
    color: var(--sb-accent);
}
.sh-cat-list__icon { display: flex; flex: 0 0 18px; color: var(--sb-accent); }
.sh-cat-list__icon svg { width: 18px; height: 18px; }
.sh-cat-list__name { flex: 1 1 auto; }
.sh-cat-list__chevron {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    opacity: 0.4;
}
.sh-cat-list__link.is-active .sh-cat-list__chevron { opacity: 0.75; }

/* Przypięte do dna, żeby krótsza kolumna nie kończyła się pustką.
   `--sb-cat-foot: 52px` trzyma oba dna w jednej linii — bez tego wyższy link
   po prawej (dwie linie tekstu + strzałka) przesuwał swoją kreskę w górę. */
.sh-cat-nav__all {
    display: flex;
    align-items: center;
    min-height: var(--sb-cat-foot);
    padding: 8px 20px;
    border-top: 1px solid var(--sb-border);
    color: var(--sb-ink);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: background 0.15s ease, color 0.15s ease;
}
.sh-cat-nav__all:hover { background: var(--sb-surface); color: var(--sb-accent); }

/* Prawa kolumna — panele podkategorii ułożone w jednej komórce gridu */
.sh-cat-panes {
    display: grid;
    flex: 1 1 auto;
    background: #FCF9FC;
}
/* Przełączanie przez `opacity`, nie `visibility` — `visibility: visible` na
   aktywnym panelu nadpisywało odziedziczone `hidden` z zamkniętego dropdownu
   i wypuszczało go na hero jako niewidzialny, ale klikalny blok. */
.sh-cat-pane {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 14px 0 0;
    opacity: 0;
    pointer-events: none;
}
.sh-cat-pane.is-active { opacity: 1; pointer-events: auto; }
/* Para auto-marginesów centruje nagłówek z listą w wolnej przestrzeni: przy
   dwóch podkategoriach panel nie wygląda na urwany, przy dwunastu marginesy
   schodzą do zera i lista zajmuje całą wysokość. */
.sh-cat-pane__head {
    margin-top: auto;
    padding: 4px 22px 12px;
    border-bottom: 1px solid var(--sb-border);
}
/* Kategoria bez podkategorii nie ma listy, która oddaje dolny auto-margines —
   bez tego sam górny zsuwa nagłówek na dno panelu. */
.sh-cat-pane:not(:has(.sh-cat-pane__list)) .sh-cat-pane__head { margin-bottom: auto; }
.sh-cat-pane__title {
    display: block;
    color: var(--sb-ink);
    font-size: 15px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
.sh-cat-pane__count {
    display: block;
    margin-top: 3px;
    color: var(--sb-muted);
    font-size: 12px;
    font-weight: 600;
}
.sh-cat-pane__list {
    flex: 0 1 auto;
    margin: 0 0 auto;
    list-style: none;
    padding: 6px 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.sh-cat-pane__list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 7px 22px;
    color: var(--sb-ink);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 550;
    line-height: 1.35;
    transition: background 0.15s ease, color 0.15s ease;
}
.sh-cat-pane__list a:hover { background: var(--sb-surface); color: var(--sb-accent); }
.sh-cat-pane__name { flex: 1 1 auto; }
.sh-cat-pane__num {
    color: var(--sb-muted);
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.sh-cat-pane__list a:hover .sh-cat-pane__num { color: var(--sb-accent); }
.sh-cat-pane__all {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: var(--sb-cat-foot);
    padding: 8px 22px;
    border-top: 1px solid var(--sb-border);
    color: var(--sb-accent);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
    transition: background 0.15s ease;
}
.sh-cat-pane__all:hover { background: var(--sb-surface); }
.sh-cat-pane__all svg { width: 13px; height: 13px; flex: 0 0 13px; }

/* --- Language switcher (WPML) — utility strip hover dropdown --- */
.serwis-langsw--header {
    position: relative;
    z-index: 120; /* lift above sticky .sh-brand (z-index:100) so the menu paints over it */
    align-self: stretch;
    display: inline-flex;
    align-items: center;
}
.serwis-langsw__flag {
    display: block;
    border-radius: 2px;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);
}
.serwis-langsw__trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    background: none;
    border: 0;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    transition: color 0.15s ease;
}
.serwis-langsw--header:hover .serwis-langsw__trigger,
.serwis-langsw--header:focus-within .serwis-langsw__trigger { color: #fff; }
.serwis-langsw__trigger .serwis-langsw__flag { width: 18px; height: 13px; }
.serwis-langsw__code { font-weight: 700; }
.serwis-langsw__chevron {
    width: 11px;
    height: 11px;
    flex: 0 0 11px;
    opacity: 0.55;
    transition: transform 0.2s ease;
}
.serwis-langsw--header:hover .serwis-langsw__chevron,
.serwis-langsw--header:focus-within .serwis-langsw__chevron { transform: rotate(180deg); }
.serwis-langsw__menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 192px;
    list-style: none;
    margin: 0;
    padding: 6px 0;
    background: #fff;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 12px 32px rgba(26, 0, 26, 0.18);
    opacity: 0;
    visibility: hidden;
    transform-origin: top right;
    transform: translateY(-6px) scale(0.92);
    transition: opacity 0.18s ease, transform 0.22s ease-in, visibility 0s linear 0.22s;
}
.serwis-langsw--header:hover .serwis-langsw__menu,
.serwis-langsw--header:focus-within .serwis-langsw__menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity 0.2s ease, transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s;
}
/* Pozycje wchodzą kaskadą od góry; przy zamykaniu gasną razem z menu (bez opóźnień). */
.serwis-langsw__menu .serwis-langsw__link {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.serwis-langsw--header:hover .serwis-langsw__link,
.serwis-langsw--header:focus-within .serwis-langsw__link {
    opacity: 1;
    transform: none;
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1), background 0.15s ease, color 0.15s ease;
}
.serwis-langsw--header:hover li:nth-child(2) .serwis-langsw__link,
.serwis-langsw--header:focus-within li:nth-child(2) .serwis-langsw__link { transition-delay: 0.03s; }
.serwis-langsw--header:hover li:nth-child(3) .serwis-langsw__link,
.serwis-langsw--header:focus-within li:nth-child(3) .serwis-langsw__link { transition-delay: 0.06s; }
.serwis-langsw--header:hover li:nth-child(4) .serwis-langsw__link,
.serwis-langsw--header:focus-within li:nth-child(4) .serwis-langsw__link { transition-delay: 0.09s; }
.serwis-langsw--header:hover li:nth-child(5) .serwis-langsw__link,
.serwis-langsw--header:focus-within li:nth-child(5) .serwis-langsw__link { transition-delay: 0.12s; }
.serwis-langsw--header:hover li:nth-child(6) .serwis-langsw__link,
.serwis-langsw--header:focus-within li:nth-child(6) .serwis-langsw__link { transition-delay: 0.15s; }
.serwis-langsw--header:hover li:nth-child(7) .serwis-langsw__link,
.serwis-langsw--header:focus-within li:nth-child(7) .serwis-langsw__link { transition-delay: 0.18s; }
.serwis-langsw--header:hover li:nth-child(8) .serwis-langsw__link,
.serwis-langsw--header:focus-within li:nth-child(8) .serwis-langsw__link { transition-delay: 0.21s; }
.serwis-langsw--header:hover li:nth-child(9) .serwis-langsw__link,
.serwis-langsw--header:focus-within li:nth-child(9) .serwis-langsw__link { transition-delay: 0.24s; }
.serwis-langsw__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    color: var(--sb-ink);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.2;
    transition: background 0.15s ease, color 0.15s ease;
}
.serwis-langsw__link .serwis-langsw__flag { width: 20px; height: 14px; }
.serwis-langsw__link:hover { background: var(--sb-surface); color: var(--sb-accent); }
.serwis-langsw__link.is-current { color: var(--sb-accent); cursor: default; }
.serwis-langsw__link.is-current span { margin-right: auto; }
.serwis-langsw__link.is-current::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sb-accent);
}

/* --- Language switcher — mobile drawer grid (white panel) --- */
/* Przełącznik języka w nagłówku szuflady — rozwijany panel na `<details>`.
   Dla gościa z zagranicy to jedyne wejście do 9 języków na telefonie, więc
   siedzi nad zgięciem, obok krzyżyka, a nie na dnie przewijanego menu. */
.serwis-langsw--drawer { position: relative; }
.serwis-langsw--drawer .serwis-langsw__trigger {
    display: flex;
    align-items: center;
    gap: 7px;
    height: 44px; /* minimalny cel dotykowy */
    padding: 0 12px;
    border: 1px solid var(--sb-border);
    border-radius: 8px;
    background: var(--sb-surface);
    color: var(--sb-ink);
    cursor: pointer;
    list-style: none; /* usuwa domyślny trójkąt <summary> w Firefoksie */
    transition: border-color 0.15s ease;
}
.serwis-langsw--drawer .serwis-langsw__trigger::-webkit-details-marker { display: none; }
.serwis-langsw--drawer[open] .serwis-langsw__trigger { border-color: var(--sb-accent); }
.serwis-langsw--drawer .serwis-langsw__flag {
    width: 20px;
    height: 14px;
    flex: 0 0 20px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.10);
}
.serwis-langsw--drawer .serwis-langsw__code {
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
}
.serwis-langsw--drawer .serwis-langsw__chevron {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    opacity: 0.5;
    transition: transform 0.2s ease;
}
.serwis-langsw--drawer[open] .serwis-langsw__chevron { transform: rotate(180deg); }

.serwis-langsw__sheet {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 10;
    width: 232px;
    max-height: 60vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 10px 0 6px;
    background: #fff;
    border: 1px solid var(--sb-border);
    border-radius: 10px;
    box-shadow: 0 14px 34px rgba(26, 0, 26, 0.18);
    transform-origin: top right;
}
/* <details> pokazuje treść skokowo — wejście animuje keyframe, wyjście klasa
   `is-closing` z header.js, która zdejmuje `open` dopiero po animationend.
   Keyframe wejścia wyłącznie pod `[open]`: WebKit liczy style treści zamkniętego
   <details> i bez tego odgrywa animację na starcie strony, a otwarcie jest skokowe. */
.serwis-langsw--drawer[open] .serwis-langsw__sheet {
    animation: serwis-langsw-in 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.serwis-langsw--drawer.is-closing .serwis-langsw__sheet {
    animation: serwis-langsw-out 0.2s ease-in both;
}
@keyframes serwis-langsw-in {
    from { opacity: 0; transform: translateY(-8px) scale(0.92); }
    to { opacity: 1; transform: none; }
}
@keyframes serwis-langsw-out {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateY(-8px) scale(0.92); }
}
@media (prefers-reduced-motion: reduce) {
    .serwis-langsw__sheet,
    .serwis-langsw--drawer.is-closing .serwis-langsw__sheet { animation-duration: 0.01s; }
    .serwis-langsw__menu,
    .serwis-langsw__menu .serwis-langsw__link { transition-duration: 0.01s; transition-delay: 0s; }
}
.serwis-langsw__sheet-label {
    display: block;
    padding: 0 14px 8px;
    color: var(--sb-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.serwis-langsw__list { list-style: none; margin: 0; padding: 0; }
.serwis-langsw__item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    color: var(--sb-ink);
    text-decoration: none;
    font-size: 13.5px;
    transition: background 0.15s ease;
}
.serwis-langsw__item:hover { background: var(--sb-surface); }
.serwis-langsw__item .serwis-langsw__flag { width: 22px; height: 15px; flex: 0 0 22px; }
.serwis-langsw__name { flex: 1 1 auto; font-weight: 600; }
.serwis-langsw__item .serwis-langsw__code {
    color: var(--sb-muted);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
}
.serwis-langsw__item.is-current {
    background: var(--sb-accent);
    color: #fff;
}
.serwis-langsw__item.is-current .serwis-langsw__code { color: rgba(255, 255, 255, 0.72); }
.serwis-langsw__item.is-current .serwis-langsw__flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.4); }

.sh-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
    flex: 1 1 auto;
}
.sh-menu li { flex: 0 0 auto; }
.sh-menu li a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0 18px;
    height: 48px;
    position: relative;
    transition: color 0.15s ease, background 0.15s ease;
}
.sh-menu li a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}
.sh-menu li a::after {
    content: "";
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 0;
    height: 3px;
    background: var(--sb-accent-light);
    border-radius: 3px 3px 0 0;
    transform: scaleX(0);
    transition: transform 0.2s ease;
}
.sh-menu li a:hover::after,
.sh-menu li.current-menu-item a::after,
.sh-menu li.current-menu-parent a::after {
    transform: scaleX(1);
}
.sh-menu li.current-menu-item a { color: #fff; }

/* CTA button */
.sh-navbar__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 20px;
    margin-left: auto;
    background: var(--sb-accent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-decoration: none;
    border-radius: 6px;
    transition: background 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
}
.sh-navbar__cta:hover {
    background: #fff;
    color: var(--sb-ink);
    transform: translateY(-1px);
}
.sh-navbar__cta svg { width: 14px; height: 14px; flex: 0 0 14px; }

/* --- Sticky compact state (when .sh-top scrolls past viewport) ---
   Tablet+desktop only. Mobile keeps default layout.
   ZERO height changes — only label fade + logo scale stay INSIDE the
   sticky containers. No document reflow → no jitter, no peek-through. */
.sh-logo {
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    transform-origin: left center;
}
.sh-action__label {
    white-space: nowrap;
    overflow: hidden;
    transition: opacity 0.18s ease,
                max-width 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
    .sh.is-scrolled .sh-logo {
        transform: scale(0.92);
    }
    .sh.is-scrolled .sh-action__label {
        opacity: 0;
        max-width: 0;
        margin-left: 0;
    }
}

/* ==========================================================================
   Products slider ([serwis_products_slider])
   Native CSS scroll-snap track + custom prev/next arrows.
   ========================================================================== */
.serwis-products,
.entry-content .serwis-products {
    padding: 64px 0 96px !important;
    margin: 0 !important;
    background: #fff;
}
.serwis-products__inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}
.serwis-products__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 32px;
}
.serwis-products__heading {
    margin: 0 !important;
    font-size: clamp(24px, 2.4vw, 34px) !important;
    font-weight: 800 !important;
    color: var(--sb-ink) !important;
    letter-spacing: -0.01em;
}
.serwis-products__nav {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}
.serwis-products__arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(27, 25, 25, 0.14);
    background: #fff;
    color: var(--sb-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, transform 0.12s ease,
                box-shadow 0.18s ease, opacity 0.2s ease;
}
.serwis-products__arrow svg { width: 18px; height: 18px; }
.serwis-products__arrow:hover {
    background: var(--sb-blue-900);
    color: #fff;
    border-color: var(--sb-blue-900);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.22);
}
.serwis-products__arrow:active {
    transform: translateY(0);
}
.serwis-products__arrow:focus-visible {
    outline: 2px solid var(--sb-accent);
    outline-offset: 3px;
}
.serwis-products__arrow:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

.serwis-products__track {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 0 8px !important;
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.serwis-products__track::-webkit-scrollbar { display: none; }
.serwis-products__track:focus-visible {
    outline: 2px solid var(--sb-accent);
    outline-offset: 4px;
    border-radius: 4px;
}

.serwis-products__card {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 calc((100% - 72px) / 4);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(27, 25, 25, 0.08);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.22s ease;
}
.serwis-products__card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.18),
                0 4px 12px -6px rgba(0, 0, 0, 0.08);
    border-color: rgba(27, 25, 25, 0.14);
}
.serwis-products__card::before,
ul.serwis-products__track > li.serwis-products__card::before,
ul.serwis-products__track > li.serwis-products__card::marker {
    content: none !important;
    display: none !important;
}

/* Kadr 4:3 + scale-down, nie 1:1 + cover — ta sama diagnoza co w katalogu Woo
   (§Shop archive, `object-fit: SCALE-DOWN`): zdjęcia produktowe mają proporcje
   od 0,65 (słupek 284×435) do 2,01 (stopa PVC 283×141), więc cover jednocześnie
   obcinał końcówki produktu i skalował bitmapę ponad jej natywne 283 px.
   Tło zostaje białe: zdjęcia mają wypalone własne białe tło i każdy inny
   podkład ujawnia je jako jaśniejszy prostokąt. */
.serwis-products__media {
    display: block;
    aspect-ratio: 4 / 3;
    background: #fff;
    position: relative;
    overflow: hidden;
}
.serwis-products__img,
.serwis-products__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: scale-down !important;
    display: block !important;
    padding: 18px !important;
    margin: 0 !important;
    border: 0 !important;
    filter: saturate(0.88) contrast(1.02);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
/* SVG product placeholders use contain (not cover) for centered logos.
   Świadomie `contain`, nie `scale-down` jak w katalogu — SVG skaluje się
   bezstratnie, więc ograniczanie do rozmiaru natywnego tylko by je zmniejszyło. */
.serwis-products__img--svg,
.serwis-products__media .serwis-products__img--svg {
    object-fit: contain !important;
    padding: 22px !important;
    filter: none;
}
.serwis-products__card:hover .serwis-products__img {
    transform: scale(1.04);
}
.serwis-products__img-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(27, 25, 25, 0.25);
}
.serwis-products__img-fallback svg { width: 56px; height: 56px; }

.serwis-products__body {
    padding: 18px 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
}
.serwis-products__cat {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sb-muted);
    font-weight: 600;
}
.serwis-products__title {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
    color: var(--sb-ink) !important;
    letter-spacing: -0.005em;
    /* clamp to 2 lines */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.serwis-products__title a {
    color: inherit !important;
    text-decoration: none !important;
}
.serwis-products__title a:hover { color: var(--sb-accent) !important; }
.serwis-products__price {
    font-size: 18px;
    font-weight: 800;
    color: var(--sb-ink);
    margin-top: auto;
    padding-top: 4px;
}
.serwis-products__price .woocommerce-Price-amount { font-weight: 800; }
.serwis-products__cta {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--sb-blue-900);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: 8px;
    transition: background 0.18s ease, transform 0.12s ease;
}
.serwis-products__cta:hover {
    background: var(--sb-accent);
    transform: translateY(-1px);
}
.serwis-products__cta svg { width: 14px; height: 14px; }

/* F-025 — Catalog link pod sliderem produktów.
   Subtle inline link (nie button) wyrównany do lewej z heading/slider, bez
   bordera. Animacja strzałki na hover: pętla (rotacja 360° + circular translate),
   plus subtle underline grow. */
.serwis-products__inner {
    display: flex;
    flex-direction: column;
}
.serwis-products__catalog-link {
    display: inline-flex !important;
    align-items: center;
    gap: 10px;
    align-self: flex-start;
    margin: 28px 0 0;
    padding: 6px 0;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: var(--sb-accent) !important;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none !important;
    box-shadow: none !important;
    transition: color 0.2s ease;
}
.serwis-products__catalog-link span {
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 0% 1.5px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    padding-bottom: 2px;
}
/* F-025 v15 — Pure base styling. ALL animation (dashoffset, head position,
   opacity) handled by assets/arrow-loop.js via requestAnimationFrame.
   No CSS transitions on body / head paths — JS sets every frame. */
.serwis-products__catalog-link svg.serwis-arrow-loop {
    width: 60px;
    height: 22px;
    overflow: visible;
    flex-shrink: 0;
}
.serwis-products__catalog-link:hover span {
    background-size: 100% 1.5px;
}
.serwis-products__catalog-link:hover {
    color: var(--sb-blue) !important;
}
.serwis-products__catalog-link:focus-visible {
    outline: 2px solid var(--sb-accent);
    outline-offset: 4px;
    border-radius: 2px;
}

@media (max-width: 1024px) {
    .serwis-products__card { flex: 0 0 calc((100% - 24px) / 2); }
    .serwis-products__catalog-link { margin-top: 22px; font-size: 14px; }
    .serwis-products__catalog-link svg { width: 16px; height: 16px; }
}
@media (max-width: 767px) {
    .serwis-products,
    .entry-content .serwis-products { padding: 48px 0 64px !important; }
    .serwis-products__inner { padding: 0 16px; }
    .serwis-products__header { margin: 0 0 24px; }
    /* Single full-width card carousel: karta wypełnia inner content area
       (.serwis-products__inner padding 0 16). Następna karta przewija się
       w pełni poza viewport — bez peek. Brak track margin/padding tricks,
       żeby card.left dokładnie zrównało się z heading.left. */
    .serwis-products__track {
        gap: 16px;
        margin: 0 !important;
        padding: 0 0 8px !important;
        scroll-padding: 0;
    }
    .serwis-products__card {
        flex: 0 0 100%;
        scroll-snap-align: start;
    }
    .serwis-products__arrow { width: 40px; height: 40px; }
}

/* ==========================================================================
   Mobile drawer — fullscreen with staggered animations
   ========================================================================== */
@keyframes drawerItemIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes drawerGlow {
    0%, 100% { opacity: 0.4; }
    50%      { opacity: 0.8; }
}

.sh-drawer {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    visibility: hidden;
    /* Ukrycie dopiero po wyjeździe panelu (0.4s) — inaczej zamknięcie jest skokowe. */
    transition: visibility 0s linear 0.4s;
}
.sh-drawer[aria-hidden="false"] { pointer-events: auto; visibility: visible; transition-delay: 0s; }

.sh-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.35s ease;
}
.sh-drawer[aria-hidden="false"] .sh-drawer__overlay { opacity: 1; }

.sh-drawer__panel {
    position: absolute;
    inset: 0;
    background: #fff;
    color: var(--sb-ink);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
.sh-drawer[aria-hidden="false"] .sh-drawer__panel {
    transform: translateX(0);
}

/* --- Head --- */
.sh-drawer__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    flex: 0 0 auto;
}
.sh-drawer__head .sh-logo__text { font-size: 26px; }
.sh-drawer__head .sh-logo__bar { height: 30px; width: 4px; }
.sh-drawer__head .sh-logo__dot { font-size: 14px; }
.sh-drawer__head-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sh-drawer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: transparent;
    border: 1px solid var(--sb-border);
    color: var(--sb-muted);
    cursor: pointer;
    border-radius: 50%;
    transition: color 0.2s ease, background 0.2s ease, transform 0.3s ease;
}
.sh-drawer__close:hover {
    color: #fff;
    background: var(--sb-accent);
    border-color: var(--sb-accent);
    transform: rotate(90deg);
}
.sh-drawer__close svg { width: 20px; height: 20px; display: block; }

/* --- Body --- */
.sh-drawer__body {
    flex: 1 1 auto;
    padding: 8px 24px 24px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.sh-drawer__section { display: flex; flex-direction: column; }

.sh-drawer__label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sb-muted);
    padding: 0 0 12px;
    margin: 0;
    border-bottom: 1px solid var(--sb-border);
}

/* --- Category grid --- */
.sh-drawer__cats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    padding-top: 12px;
}
/* Ten sam podział ról co w siatce na home: kafel sklepu wyróżniony akcentem. */
.sh-drawer__cat--all {
    border-color: var(--sb-accent-light);
}

.sh-drawer__cat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 88px;
    padding: 12px 10px;
    border: 1px solid var(--sb-border);
    border-radius: 10px;
    color: var(--sb-ink);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.sh-drawer__cat:hover,
.sh-drawer__cat:active {
    border-color: var(--sb-accent);
    background: var(--sb-surface);
}
.sh-drawer__cat-icon { display: flex; color: var(--sb-accent); }
.sh-drawer__cat-icon svg { width: 22px; height: 22px; }
.sh-drawer__cat-name {
    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.25;
}

/* --- Nav menu --- */
.sh-drawer__menu {
    list-style: none;
    margin: 0;
    padding: 4px 0 0;
}
.sh-drawer__menu li a {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    color: var(--sb-ink);
    text-decoration: none;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    border-radius: 10px;
    position: relative;
    transition: color 0.2s ease, background 0.2s ease;
}
.sh-drawer__menu li a::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    background: var(--sb-accent);
    border-radius: 2px;
    transform: translateY(-50%);
    transition: height 0.2s ease;
}
.sh-drawer__menu li a:hover {
    color: var(--sb-accent);
    background: var(--sb-surface);
}
.sh-drawer__menu li a:hover::before {
    height: 24px;
}
.sh-drawer__menu li.current-menu-item a {
    color: var(--sb-accent);
}
.sh-drawer__menu li.current-menu-item a::before {
    height: 24px;
}

/* --- Footer --- */
.sh-drawer__footer {
    flex: 0 0 auto;
    padding: 20px 24px 28px;
    border-top: 1px solid var(--sb-border);
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.sh-drawer__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    background: var(--sb-accent);
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 12px;
    transition: background 0.2s ease, transform 0.15s ease;
}
.sh-drawer__cta:hover {
    background: #620063;
    transform: translateY(-1px);
}
.sh-drawer__contact {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.sh-drawer__phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--sb-ink);
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
}
.sh-drawer__phone svg { width: 16px; height: 16px; flex: 0 0 16px; color: var(--sb-accent); }
.sh-drawer__hours { color: var(--sb-muted); font-size: 12px; }

/* --- Staggered reveal animation --- */
.sh-drawer__anim {
    opacity: 0;
    transform: translateY(20px);
}
.sh-drawer[aria-hidden="false"] .sh-drawer__anim {
    animation: drawerItemIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.sh-drawer[aria-hidden="false"] .sh-drawer__anim[data-anim="1"]  { animation-delay: 0.08s; }
.sh-drawer[aria-hidden="false"] .sh-drawer__anim[data-anim="2"]  { animation-delay: 0.12s; }
.sh-drawer[aria-hidden="false"] .sh-drawer__anim[data-anim="3"]  { animation-delay: 0.16s; }
.sh-drawer[aria-hidden="false"] .sh-drawer__anim[data-anim="4"]  { animation-delay: 0.20s; }
.sh-drawer[aria-hidden="false"] .sh-drawer__anim[data-anim="5"]  { animation-delay: 0.24s; }
.sh-drawer[aria-hidden="false"] .sh-drawer__anim[data-anim="6"]  { animation-delay: 0.28s; }
.sh-drawer[aria-hidden="false"] .sh-drawer__anim[data-anim="7"]  { animation-delay: 0.32s; }
.sh-drawer[aria-hidden="false"] .sh-drawer__anim[data-anim="8"]  { animation-delay: 0.36s; }
.sh-drawer[aria-hidden="false"] .sh-drawer__anim[data-anim="9"]  { animation-delay: 0.40s; }
.sh-drawer[aria-hidden="false"] .sh-drawer__anim[data-anim="10"] { animation-delay: 0.44s; }
.sh-drawer[aria-hidden="false"] .sh-drawer__anim[data-anim="11"] { animation-delay: 0.48s; }
.sh-drawer[aria-hidden="false"] .sh-drawer__anim[data-anim="12"] { animation-delay: 0.52s; }

/* ==========================================================================
   Header responsive
   ========================================================================== */
@media (max-width: 1200px) {
    .sh-menu li a { font-size: 12.5px; padding: 0 12px; }
    .sh-cat-trigger { padding: 0 14px; font-size: 12.5px; }
    .sh-navbar__cta { font-size: 11.5px; padding: 0 14px; }
    .sh-brand > .sh-contain { gap: 20px; }
}

/* Poniżej 1000px `.sh-navbar` ustępuje szufladzie, więc panel dostraja się
   tylko w wąskim paśmie 1000–1080 px: węższa lewa kolumna, ciaśniejszy rytm. */
@media (max-width: 1080px) {
    .sh-cat-dropdown { width: 560px; }
    .sh-cat-nav { flex: 0 0 268px; }
    .sh-cat-list__link { padding: 9px 14px 9px 16px; font-size: 13.5px; }
    .sh-cat-pane__list a { padding: 7px 18px; }
    .sh-cat-pane__head,
    .sh-cat-pane__all { padding-left: 18px; padding-right: 18px; }
}

@media (max-width: 999px) {
    .sh-navbar { display: none; }
    .sh-burger { display: flex; }
    .sh-top__left { display: none; }
    .sh-top__location { display: none; }
    .sh-top__sep:last-of-type { display: none; }
    .sh-top > .sh-contain { justify-content: center; }
    .sh-brand > .sh-contain { gap: 12px; height: 68px; }
    .sh-search__box { height: 42px; }
    .sh-action:not(.sh-action--cart) { display: none; }
    .sh-action--cart .sh-action__label { display: none; }
    .sh-action--cart { min-width: 44px; padding: 6px; }
}

@media (max-width: 689px) {
    .sh-top { display: none; }
    .sh-contain { padding-left: 16px; padding-right: 16px; }
    .sh-logo__text { font-size: 26px; }
    .sh-logo__bar { height: 30px; width: 4px; }
    .sh-logo__dot { font-size: 14px; }
    .sh-brand > .sh-contain { height: 60px; gap: 10px; }
    .sh-search-toggle { display: flex; }
    /* Formularz opuszcza wiersz, więc akcje same muszą dociągnąć do prawej. */
    .sh-actions { margin-left: auto; }
    /* Sticky `.sh-brand` jest containing blockiem, więc panel wisi pod belką także po przewinięciu. */
    .sh-search {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 12px 16px 14px;
        background: #fff;
        border-bottom: 1px solid var(--sb-border);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.14);
        visibility: hidden;
        opacity: 0;
        pointer-events: none;
        /* „Dżin": panel wyrasta z lupy — origin ustawia header.js z pozycji przycisku. */
        transform-origin: var(--sh-search-origin-x, calc(100% - 118px)) top;
        transform: scale(0.2, 0.06) translateY(-28px);
        will-change: transform, opacity;
        transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.4, 0, 0.9, 0.4), visibility 0s linear 0.2s;
    }
    .sh.is-search-open .sh-search {
        visibility: visible;
        opacity: 1;
        pointer-events: auto;
        transform: none;
        /* Wejście wolniejsze niż wyjście: droga skali ma być widoczna, lekki przestrzał na końcu. */
        transition: opacity 0.22s ease, transform 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.04), visibility 0s;
    }
    .sh-search__box { height: 44px; border-radius: 6px; }
    .sh-search__box .sh-search__input { border-radius: 4px 0 0 4px; }
    .sh-search__box .sh-search__btn { flex: 0 0 48px; border-radius: 0 6px 6px 0; }
    .sh-search__btn svg { width: 20px; height: 20px; }
    .sh-search__box .sh-search__input { padding: 0 14px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .sh-search-toggle__ring,
    .sh-search-toggle__stem,
    .sh-search-toggle__cross { transition: none; }
}
@media (max-width: 689px) and (prefers-reduced-motion: reduce) {
    .sh-search { transform: none; transition: opacity 0.15s ease, visibility 0s linear 0.15s; }
    .sh.is-search-open .sh-search { transition: opacity 0.15s ease, visibility 0s; }
}


/* ==========================================================================
   F-012 — Dual price (brutto + netto) na karcie produktu i single product
   ========================================================================== */
.serwis-price--dual {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.25;
    max-width: 100%;
}
.serwis-price__brutto,
.serwis-price__netto {
    display: inline-block;
    white-space: normal;
}
.serwis-price__brutto {
    font-weight: 800;
    color: var(--sb-ink);
    font-size: 1em;
}
.serwis-price__netto {
    font-weight: 600;
    color: var(--sb-muted);
    font-size: 0.78em;
}
.serwis-price__note {
    font-weight: 500;
    color: var(--sb-muted);
    font-size: 0.72em;
    margin-left: 6px;
    white-space: nowrap;
    letter-spacing: 0.005em;
}
.serwis-price__brutto .woocommerce-Price-amount,
.serwis-price__netto .woocommerce-Price-amount,
.serwis-price__brutto .woocommerce-Price-amount bdi,
.serwis-price__netto .woocommerce-Price-amount bdi {
    font-weight: inherit;
    color: inherit;
}

/* Slider produktów (home) */
.serwis-products__price .serwis-price--dual { gap: 2px; }
.serwis-products__price .serwis-price__brutto { font-size: 18px; }
.serwis-products__price .serwis-price__netto  { font-size: 13px; }
.serwis-products__price .serwis-price__note   { font-size: 11.5px; margin-left: 5px; }

/* Listing kategorii / shop archive (Woo default markup) */
.woocommerce ul.products li.product .price .serwis-price__brutto,
.woocommerce ul.products li.product .price .serwis-price--dual { font-size: 1em; }
.woocommerce ul.products li.product .price .serwis-price__brutto { font-size: 17px; }
.woocommerce ul.products li.product .price .serwis-price__netto  { font-size: 13px; }
.woocommerce ul.products li.product .price .serwis-price__note   { font-size: 11.5px; }

/* Single product — szerszy widok */
.woocommerce div.product p.price .serwis-price__brutto,
.woocommerce div.product .summary .serwis-price__brutto { font-size: 26px; }
.woocommerce div.product p.price .serwis-price__netto,
.woocommerce div.product .summary .serwis-price__netto  { font-size: 15px; }
.woocommerce div.product p.price .serwis-price__note,
.woocommerce div.product .summary .serwis-price__note   { font-size: 13px; margin-left: 8px; }
.woocommerce div.product p.price .serwis-price--dual,
.woocommerce div.product .summary .serwis-price--dual   { gap: 4px; }

@media (max-width: 480px) {
    .serwis-products__price .serwis-price__brutto { font-size: 16px; }
    .serwis-products__price .serwis-price__netto  { font-size: 12px; }
    .serwis-products__price .serwis-price__note   { font-size: 10.5px; }
}

/* F-015 — Variation chips sonto (Variation Swatches plugin) */
.woocommerce div.product form.cart .variations { border: 0; margin: 0 0 14px; }
.woocommerce div.product form.cart .variations td,
.woocommerce div.product form.cart .variations th {
    border: 0;
    padding: 4px 0 8px;
    vertical-align: top;
    background: transparent;
}
.woocommerce div.product form.cart .variations th.label {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--sb-ink);
    padding-right: 12px;
    width: auto;
    white-space: nowrap;
}
.woocommerce div.product form.cart .variations th.label label { font-weight: 700; }
.woocommerce div.product form.cart .variations td.value { width: 100%; }
.woocommerce div.product form.cart .reset_variations {
    display: inline-block;
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--sb-muted);
    text-decoration: underline;
}
.woocommerce div.product form.cart .reset_variations:hover { color: var(--sb-accent); }

/* Chip buttons (Variation Swatches plugin output) */
.woo-variation-swatches .variable-items-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.woo-variation-swatches .variable-items-wrapper .variable-item {
    width: auto !important;
    min-width: 64px;
    height: auto !important;
    min-height: 44px !important;
    padding: 10px 18px !important;
    margin: 0;
    border: 1.5px solid var(--sb-muted);
    border-radius: 6px;
    background: #fff;
    color: var(--sb-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.2;
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    text-align: center;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.woo-variation-swatches .variable-items-wrapper .variable-item:hover {
    border-color: var(--sb-accent);
    background: rgba(138, 0, 139, 0.04);
}
.woo-variation-swatches .variable-items-wrapper .variable-item.selected,
.woo-variation-swatches .variable-items-wrapper .variable-item.selected:hover {
    border-color: var(--sb-accent);
    background: rgba(138, 0, 139, 0.08);
    color: var(--sb-accent);
}
/* F-045: nie pokazujemy kombinacji, których nie mamy — zamiast przekreślenia. */
.woo-variation-swatches .variable-items-wrapper .variable-item.disabled,
.woo-variation-swatches .variable-items-wrapper .variable-item.out-of-stock {
    display: none;
}
.woo-variation-swatches .variable-items-wrapper.button-variable-items-wrapper .variable-item.button-variable-item {
    background-image: none;
}

/* Selected-variation price area refresh */
.woocommerce div.product .woocommerce-variation-price { margin: 10px 0 14px; }
.woocommerce div.product .woocommerce-variation-availability p {
    margin: 0 0 12px;
    font-size: 13px;
    color: var(--sb-muted);
}
.woocommerce div.product .woocommerce-variation-availability .stock.in-stock { color: #1f7a3a; }
.woocommerce div.product .woocommerce-variation-availability .stock.out-of-stock { color: #b3261e; }

@media (max-width: 600px) {
    /* Variations — block layout (eliminuje natywny table cell padding ~15px)
       + ambient label. Table jest semantycznie LISTĄ atrybut→wartość, nie tabelą
       danych — display:block kompaktuje bez utraty znaczenia. */
    .woocommerce div.product form.cart .variations,
    .woocommerce div.product form.cart .variations tbody,
    .woocommerce div.product form.cart .variations tr,
    .woocommerce div.product form.cart .variations td,
    .woocommerce div.product form.cart .variations th {
        display: block !important;
        padding: 0 !important;
        border: 0 !important;
        width: auto !important;
        background: transparent !important;
    }
    .woocommerce div.product form.cart .variations { margin: 0 0 2px; border-spacing: 0 !important; }
    .woocommerce div.product form.cart .variations tr.attribute { margin-bottom: 2px; }
    .woocommerce div.product form.cart .variations th.label {
        padding-bottom: 2px !important;
        margin: 0;
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0;
        text-transform: none;
        color: var(--sb-muted);
    }
    .woocommerce div.product form.cart .variations th.label label {
        font-size: inherit;
        font-weight: inherit;
        letter-spacing: inherit;
        text-transform: inherit;
        color: inherit;
    }
    /* Hide "Clear" link na mobile — chip click zastępuje (user musi wybrać jeden) */
    .woocommerce div.product form.cart .reset_variations { display: none !important; }
    /* Chips — Material FilterChip default (h 32, padding 4/10, gap 4) */
    .woo-variation-swatches .variable-items-wrapper { gap: 4px; }
    .woo-variation-swatches .variable-items-wrapper .variable-item {
        min-width: 44px;
        padding: 4px 10px;
        min-height: 32px;
        font-size: 12.5px;
        font-weight: 600;
        border-radius: 4px;
        border-width: 1px;
        line-height: 1.2;
    }
    .woo-variation-swatches .variable-items-wrapper .variable-item.selected {
        box-shadow: inset 0 0 0 1px var(--sb-accent);
    }
    /* Price — inline brutto+netto single row + ambient pseudo notes.
       F-012 wymóg brutto/netto „obok siebie" — literalnie spełniony.
       Skraca 2 wiersze tekstu do 1 → savings ~22px.
       VAT notes („w tym 23% VAT" / „bez 23% VAT") ukryte na mobile,
       zastąpione krótkimi pseudo „(z VAT)" / „(netto)" — ambient. */
    .woocommerce div.product .woocommerce-variation-price,
    .woocommerce div.product p.price { margin: 4px 0 4px !important; }
    .woocommerce div.product p.price .serwis-price--dual,
    .woocommerce div.product .summary .serwis-price--dual {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 10px;
    }
    .woocommerce div.product p.price .serwis-price__brutto,
    .woocommerce div.product .summary .serwis-price__brutto { font-size: 20px; line-height: 1.1; }
    .woocommerce div.product p.price .serwis-price__netto,
    .woocommerce div.product .summary .serwis-price__netto  { font-size: 12px; line-height: 1.1; color: var(--sb-muted); }
    .woocommerce div.product p.price .serwis-price__note,
    .woocommerce div.product .summary .serwis-price__note   { display: none; }
    .woocommerce div.product p.price .serwis-price__brutto .woocommerce-Price-amount::after,
    .woocommerce div.product .summary .serwis-price__brutto .woocommerce-Price-amount::after {
        content: " z VAT";
        font-size: 10.5px;
        color: var(--sb-muted);
        font-weight: 400;
        margin-left: 4px;
        letter-spacing: 0;
    }
    .woocommerce div.product p.price .serwis-price__netto .woocommerce-Price-amount::after,
    .woocommerce div.product .summary .serwis-price__netto .woocommerce-Price-amount::after {
        content: " netto";
        font-size: 10.5px;
        color: var(--sb-muted);
        font-weight: 400;
        margin-left: 3px;
    }
    /* Stock — subtle, tight margin */
    .woocommerce div.product .stock,
    .woocommerce div.product .woocommerce-variation-availability p {
        font-size: 11px;
        margin: 0 0 6px !important;
        color: var(--sb-muted);
    }
    .woocommerce div.product .woocommerce-variation-availability .stock.in-stock,
    .woocommerce div.product .summary .stock.in-stock { color: #1f7a3a; font-weight: 600; }
    /* Form spacing — break minimum */
    .woocommerce div.product form.cart { padding-top: 2px; }
}

/* F-015 — Reset zaokrąglonych obrazków + ujednolicenie aspect-ratio na archive Woo.

   1) Border-radius reset: Blocksy domyślnie ustawia 15px na img.wp-post-image +
      .woocommerce-LoopProduct-link → wygląda "podwójnie zaokrąglone" i niespójnie
      z designem slidera home.
   2) Aspect-ratio 1:1 na kontenerze: bez tego obraz o naturalnym landscape ratio
      renderuje się niższy niż kwadratowy placeholder, Blocksy grid wyrównuje
      wysokości wierszy → karta z mniejszym obrazem ma lukę między content
      a button. Kontener trzyma kwadrat, obraz wpisuje się w niego.

   3) object-fit:SCALE-DOWN, nie cover. Katalog SONTO to zdjęcia produktowe na
      białym tle w mieszanych proporcjach (1080×1080 i 1080×720). Cover na 3:2
      skalował bitmapę 1,5× ponad szerokość kontenera: obcinał boki produktu
      (słupki barier wychodziły poza kadr) ORAZ wymuszał upscale — przeglądarka
      dobiera kandydata z srcset po szerokości layoutu (248px → plik 300px),
      po czym cover rozciągał go do 372px. Stąd rozmycie, które „ostrzało się"
      na hover, gdy transform:scale promował warstwę na GPU i re-rasteryzował.
      Scale-down = contain, ale dodatkowo nigdy ponad rozdzielczość natywną.
      Część zdjęć dociągniętych z sonto.pl ma ~250px i samo contain rozdmuchałoby
      je na cały kafelek — lepiej mniejsze i ostre niż pełnowymiarowe i rozmyte.

   Blocksy default layout całej karty (grid, padding, kolejność) pozostaje. */
.woocommerce ul.products li.product .woocommerce-LoopProduct-link,
.woocommerce ul.products li.product .wp-post-image,
.woocommerce ul.products li.product .ct-image-container,
.woocommerce ul.products li.product .ct-media-container {
    border-radius: 0 !important;
}
.woocommerce ul.products li.product .wp-post-image {
    aspect-ratio: 1 / 1 !important;
    object-fit: scale-down !important;
    object-position: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 12px;
    /* Zdjęcia mają własne białe tło — wspólny podkład eliminuje szarą ramkę
       wokół tych z lekko odbiegającym białym. */
    background: #fff;
}
.woocommerce ul.products li.product .ct-media-container,
.woocommerce ul.products li.product .ct-image-container {
    aspect-ratio: 1 / 1;
    display: block;
    width: 100%;
    overflow: hidden;
    background: #fff;
}

/* F-015 — Mobile: lewy align text+button w kartach archive.
   Blocksy ustawia card `display:flex; flex-direction:column; align-items:center;
   text-align:center`, więc każdy sub-block (price 212px, button 117px) jest
   wycentrowany na krzyżowej osi mimo text-align:left. Override align-items=
   flex-start + uniform 16px left-edge dla wszystkich elementów (title, price,
   categories .entry-meta, button bbox) — pixel-perfect single-column. */
@media (max-width: 600px) {
    .woocommerce ul.products li.product {
        align-items: flex-start !important;
        text-align: left !important;
    }
    .woocommerce ul.products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product .price,
    .woocommerce ul.products li.product .entry-meta,
    .woocommerce ul.products li.product .ct-product-categories,
    .woocommerce ul.products li.product .product_meta {
        text-align: left !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        align-self: stretch !important;
    }
    /* Button: parent wrapper handles left offset 16px; button itself bez margin
       żeby nie dublować (16 + 16 = 32 → tekst „Add to cart" przesunięty głębiej
       niż title). Bbox button.left = 16, content padding-inline button to dalej
       CTA-styling (Blocksy default ~20px). */
    .woocommerce ul.products li.product .ct-woo-card-actions {
        margin-left: 16px !important;
        margin-right: 16px !important;
        align-self: flex-start !important;
        justify-content: flex-start !important;
    }
    .woocommerce ul.products li.product .ct-woo-card-actions .button,
    .woocommerce ul.products li.product .ct-woo-card-actions .added_to_cart,
    .woocommerce ul.products li.product > .button,
    .woocommerce ul.products li.product > .added_to_cart {
        margin-left: 0 !important;
        margin-right: 0 !important;
        align-self: flex-start !important;
    }
    /* Fallback gdy button NIE jest w .ct-woo-card-actions (stary markup) —
       wrap effect przez margin-inline na samym buttonie. */
    .woocommerce ul.products li.product > a.button,
    .woocommerce ul.products li.product > .added_to_cart {
        margin-left: 16px !important;
        margin-right: 16px !important;
    }
}

/* F-063 — Offer panel (home, pod produktami): badge/heading/lead/CTA + cztery
   skróty kategorii po lewej, zdjęcie realizacji po prawej.
   Metryki zdjęte z mockupu (1998×666) i przeskalowane do 1440 (×0,7207):
   siatka co 29 px o kontraście 4/255 (poprzednie 48 px / 12,5 była trzykrotnie
   mocniejsza), kolumna tekstu od 61 px, zdjęcie do 27 px od prawej krawędzi. */
.serwis-offer,
.entry-content .serwis-offer {
    position: relative !important;
    padding: clamp(60px, 6.5vw, 96px) 0 !important;
    background-color: #fefefe !important;
    background-image:
        linear-gradient(rgba(27, 25, 25, 0.018) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 25, 25, 0.018) 1px, transparent 1px) !important;
    background-size: 29px 29px !important;
    background-position: 0 0, 0 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
.serwis-offer__inner {
    position: relative;
    z-index: 1;
    max-width: 1500px;
    margin: 0 auto;
    padding-left: clamp(20px, 4.25vw, 61px);
    padding-right: clamp(14px, 1.9vw, 27px);
    display: grid;
    grid-template-columns: minmax(0, 540fr) minmax(0, 787fr);
    column-gap: 25px;
    align-items: center;
}

/* Zdjęcie realizacji: ukos lewej krawędzi zmierzony w mockupie — 93,5 px na
   581 px wysokości, czyli 8,5 % szerokości kadru. Zaokrąglenia rogów (R=40 px
   przy 787×419) siedzą w samym polygonie, bo clip-path kasuje border-radius;
   28 punktów to cztery łuki po 6 segmentów plus wierzchołki. */
.serwis-offer__figure {
    position: relative;
    margin: 0;
}
.serwis-offer__figure-frame {
    clip-path: polygon(7.83% 8.04%, 8.15% 5.88%, 8.74% 3.93%, 9.55% 2.28%, 10.54% 1.04%, 11.66% 0.26%, 12.85% 0.00%, 94.92% 0.00%, 96.23% 0.33%, 97.46% 1.28%, 98.51% 2.80%, 99.32% 4.77%, 99.83% 7.08%, 100.00% 9.55%, 100.00% 90.45%, 99.83% 92.92%, 99.32% 95.23%, 98.51% 97.20%, 97.46% 98.72%, 96.23% 99.67%, 94.92% 100.00%, 5.96% 100.00%, 4.52% 99.61%, 3.19% 98.46%, 2.09% 96.65%, 1.31% 94.33%, 0.92% 91.69%, 0.94% 88.95%);
}
.serwis-offer__photo {
    display: block;
    width: 100%;
    aspect-ratio: 787 / 419;
    object-fit: cover;
    filter: saturate(0.94);
}

.serwis-offer__content { color: var(--sb-ink); }
/* Rząd marki z mockupu: logo 107×26 i badge startujący 174 px od lewej krawędzi sekcji. */
.serwis-offer__brand {
    display: flex;
    align-items: center;
    gap: 55px;
    margin: 0 0 40px;
}
.serwis-offer__logo {
    display: block;
    height: 26px;
    width: auto;
}
.serwis-offer__badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--sb-muted);
}
.serwis-offer__badge svg { width: 15px; height: 15px; flex: 0 0 15px; color: var(--sb-accent); }
.serwis-offer__heading {
    margin: 0 0 12px;
    font-size: clamp(30px, 3.05vw, 44px);
    line-height: 1.05;
    font-weight: 800;
    color: var(--sb-ink);
    letter-spacing: -0.01em;
}
.serwis-offer__heading-accent { color: var(--sb-accent); }
.serwis-offer__divider {
    display: flex;
    align-items: center;
    margin: 0 0 17px;
    height: 2px;
}
.serwis-offer__divider::before {
    content: "";
    width: 56px;
    height: 3px;
    background: var(--sb-accent);
    border-radius: 2px;
    flex: 0 0 auto;
}
.serwis-offer__divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    margin-left: 4px;
    background: linear-gradient(90deg, rgba(27, 25, 25, 0.20), transparent);
}
.serwis-offer__lead {
    margin: 0 0 20px;
    max-width: 350px;
    font-size: 12px;
    line-height: 1.57;
    color: var(--sb-muted);
}
.serwis-offer__actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
}
.serwis-offer__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: var(--sb-accent);
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 12.5px;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 2px 8px rgba(138, 0, 139, 0.25);
}
.serwis-offer__cta svg { width: 15px; height: 15px; }
.serwis-offer__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 22px -4px rgba(138, 0, 139, 0.45);
    background: var(--sb-blue);
}
.serwis-offer__shortcuts {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 27px 0 0;
    padding: 0;
}

.serwis-offer__shortcut-cell { flex: 0 1 auto; min-width: 0; }
.serwis-offer__shortcut {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 15px 16px;
    /* Mockup nie ma na pigułce kreski, tylko miękki cień — próbka piksela przy
       krawędzi daje płynne #fefefe → #f2f0f3 na sześciu pikselach, nie skok o 1 px. */
    border: 0;
    border-radius: 14px;
    background: #fff;
    color: var(--sb-ink);
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(27, 25, 25, 0.07), 0 1px 2px rgba(27, 25, 25, 0.04);
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1);
}
.serwis-offer__shortcut:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px -8px rgba(27, 25, 25, 0.18), 0 1px 2px rgba(27, 25, 25, 0.06);
}
.serwis-offer__shortcut:focus-visible {
    outline: 2px solid var(--sb-accent);
    outline-offset: 3px;
}
.serwis-offer__shortcut-icon { display: flex; flex: 0 0 20px; color: var(--sb-accent); }
.serwis-offer__shortcut-icon svg { width: 20px; height: 20px; }
.serwis-offer__shortcut-name {
    flex: 0 1 auto;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
}
.serwis-offer__shortcut-arrow { display: flex; flex: 0 0 12px; margin-left: 3px; color: var(--sb-muted); }
.serwis-offer__shortcut-arrow svg { width: 12px; height: 12px; }
.serwis-offer__shortcut:hover .serwis-offer__shortcut-arrow { color: var(--sb-accent); }

.serwis-offer__cta:focus-visible {
    outline: 2px solid var(--sb-accent);
    outline-offset: 3px;
}

@media (max-width: 1023px) and (min-width: 768px) {
    .serwis-offer { padding: 72px 0; }
    .serwis-offer__inner { column-gap: 24px; padding-left: 24px; padding-right: 24px; }
    .serwis-offer__heading { font-size: clamp(26px, 3.4vw, 34px); }
    .serwis-offer__lead { font-size: 16px; }
}
@media (max-width: 767px) {
    .serwis-offer { padding: 56px 0; }
    .serwis-offer__inner {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-left: 20px;
        padding-right: 20px;
    }
    /* W stosie zdjęcie jest pasem nad treścią — ukos z mockupu dotyczy splitu. */
    .serwis-offer__figure-frame { clip-path: none; border-radius: 18px; overflow: hidden; }
    .serwis-offer__photo { aspect-ratio: 16 / 9; }
    .serwis-offer__heading { font-size: clamp(26px, 5.4vw, 32px); margin-bottom: 14px; }
    .serwis-offer__brand { gap: 16px; margin-bottom: 22px; }
    .serwis-offer__logo { height: 22px; }
    .serwis-offer__divider { margin-bottom: 20px; }
    .serwis-offer__lead { font-size: 15px; margin-bottom: 10px; }
    .serwis-offer__shortcuts { gap: 8px; margin-top: 26px; }
    .serwis-offer__shortcut { padding: 11px 10px; }
    .serwis-offer__shortcut-name { font-size: 12.5px; }
    .serwis-offer__cta { padding: 12px 24px; font-size: 14px; }
}

/* ==========================================================================
   F-023 Tablet (768-1024): side margins + element size cap.
   User wymaga side margins na wszystkich sekcjach oprócz hero.
   CRITICAL: base rules używają `.entry-content X` (specificity 0,2,0) z padding
   shorthand. Moje rules muszą mieć tę samą lub wyższą specificity (dual selector)
   żeby wygrać cascade — inaczej `padding: 96px 0 !important` z base trzyma
   padding-left/right na 0.
   ========================================================================== */
@media (min-width: 768px) and (max-width: 1024px) {
    /* Tablet container = 64px side padding wszędzie poza hero. Industry standard:
       iPad portrait 768 -> ~32px; iPad landscape 1024 -> ~48-64px. Bierzemy 64. */
    .serwis-usp,
    .entry-content .serwis-usp,
    .serwis-about,
    .entry-content .serwis-about,
    .serwis-products,
    .entry-content .serwis-products,
    .serwis-offer,
    .entry-content .serwis-offer {
        padding-left: 48px !important;
        padding-right: 48px !important;
    }

    /* Slider: dokładnie 2 karty fill track (bez peek 3-ciej).
       Card flex = (100% - gap) / 2: 2 cards × width + 1 gap = 100% track. */
    .serwis-products__card {
        flex: 0 0 calc((100% - 16px) / 2) !important;
        scroll-snap-align: start !important;
    }
    .serwis-products__track {
        gap: 16px !important;
        padding-bottom: 8px !important;
    }
    .serwis-products__inner,
    .entry-content .serwis-products__inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* About: drop inner second-layer padding (now handled by section) */
    .serwis-about,
    .entry-content .serwis-about {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }
    .serwis-about__inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 40px !important;
    }
    .serwis-about__media { max-width: 420px !important; }
    .serwis-about__stats-divider { width: 88%; }
    .serwis-about__stats { width: 88%; gap: 18px; }
    /* Komórka statu ma tu ~110 px — ikona wchodzi nad liczbę, inaczej nachodzi
       na wartość i etykietę (ten sam układ co na mobile). */
    .serwis-about__stat {
        flex-direction: column-reverse;
        justify-content: flex-start;
        align-items: center;
        text-align: center;
        gap: 10px;
        padding: 14px 6px;
    }
    .serwis-about__stat-text { gap: 4px; align-items: center; width: 100%; }
    .serwis-about__stat-icon { flex: 0 0 auto; padding-left: 0; }
    .serwis-about__stat-icon::before { display: none; }
    .serwis-about__stat-icon svg { width: 24px; height: 24px; }
    .serwis-about__stat-value { font-size: 26px; }
    .serwis-about__stat-label { font-size: 10px; letter-spacing: 0.07em; white-space: normal; line-height: 1.3; }
    .serwis-about__heading {
    max-width: 405px; font-size: clamp(24px, 3.2vw, 30px) !important; }

    /* Offer: drop inner padding (now handled by section) */
    .serwis-offer,
    .entry-content .serwis-offer {
        padding-top: 64px !important;
        padding-bottom: 64px !important;
    }
    .serwis-offer__inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: 48px !important;
    }
    .serwis-offer__heading { font-size: clamp(24px, 3vw, 30px) !important; }
}

/* ==========================================================================
 * F-027 — Shop archive (4-col grid + sticky filter sidebar)
 * ========================================================================== */

.serwis-shop {
    background: #fff;
    padding: 24px 0 64px;
}
.serwis-shop__container {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
}
.serwis-shop__page-header {
    padding: 16px 0 24px;
    border-bottom: 1px solid rgba(27, 25, 25, 0.08);
    margin-bottom: 24px;
}
.serwis-shop__title {
    margin: 0;
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.1;
    font-weight: 800;
    color: var(--sb-ink);
    letter-spacing: -0.01em;
}
/* F-055: opis kategorii — pierwszy akapit pod tytułem, reszta huba pod siatką produktów */
.serwis-shop__intro {
    margin-top: 12px;
    max-width: 72ch;
    color: var(--sb-muted);
    font-size: 16px;
    line-height: 1.55;
}
.serwis-shop__intro p { margin: 0; }
.serwis-shop__desc {
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--sb-border-soft);
    max-width: 72ch;
    line-height: 1.6;
}
.serwis-shop__desc h2 { font-size: 22px; margin: 28px 0 10px; }
.serwis-shop__desc h3 { font-size: 17px; margin: 18px 0 6px; }
.serwis-shop__desc p,
.serwis-shop__desc ul { margin: 0 0 12px; }
.serwis-shop__layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 40px;
    align-items: start;
}

/* Sidebar (desktop sticky). `top` must clear the sticky header — .sh-brand
   (80px) + .sh-navbar (48px) = 128px, plus a 16px breathing gap. Without this
   the top filter sections sit hidden behind the header. */
.serwis-shop__sidebar {
    position: sticky;
    top: 144px;
    align-self: start;
    background: #fff;
    border: 1px solid rgba(27, 25, 25, 0.08);
    border-radius: 12px;
    max-height: calc(100vh - 160px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.serwis-shop__filters {
    display: flex;
    flex-direction: column;
    min-height: 0;
    flex: 1 1 auto;
    overflow: hidden;
}
.serwis-shop__filters-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.serwis-shop__sidebar-header {
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(27, 25, 25, 0.08);
}
.serwis-shop__sidebar-title {
    margin: 0;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sb-ink);
}
.serwis-shop__drawer-close {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 6px;
    color: var(--sb-ink);
    display: inline-flex;
}
.serwis-shop__drawer-close svg { width: 20px; height: 20px; }

/* Filter section (accordion) */
.serwis-shop__filter {
    border-bottom: 1px solid rgba(27, 25, 25, 0.08);
}
.serwis-shop__filter:last-of-type { border-bottom: 0; }
.serwis-shop__filter-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: transparent;
    border: 0;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sb-ink);
    cursor: pointer;
    text-align: left;
}
.serwis-shop__filter-toggle svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}
.serwis-shop__filter[data-open="true"] .serwis-shop__filter-toggle svg,
.serwis-shop__filter-toggle[aria-expanded="true"] svg {
    transform: rotate(180deg);
}
.serwis-shop__filter-body {
    padding: 0 16px 14px;
}
.serwis-shop__filter-body[hidden] { display: none; }
.serwis-shop__filter-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.serwis-shop__filter-list li { margin: 0; padding: 0; }
.serwis-shop__filter-list label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    line-height: 1.3;
    color: var(--sb-ink);
    cursor: pointer;
    padding: 4px 0;
}
.serwis-shop__filter-list input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--sb-accent);
    flex: 0 0 auto;
    margin: 0;
}
.serwis-shop__filter-label { flex: 1; }
.serwis-shop__filter-count {
    color: var(--sb-muted);
    font-size: 12px;
    flex: 0 0 auto;
}

/* Category tree — 8 top-level groups, subcategories collapsed behind a chevron.
   Parent row reads as navigation (heavier weight); children are indented and
   set smaller so the two levels never blur into one flat list. */
.serwis-shop__cat-tree {
    list-style: none;
    margin: 0;
    padding: 0;
}
.serwis-shop__cat-group + .serwis-shop__cat-group {
    border-top: 1px solid rgba(27, 25, 25, 0.06);
}
.serwis-shop__cat-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.serwis-shop__cat-parent {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    padding: 9px 0;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sb-ink);
    cursor: pointer;
}
.serwis-shop__cat-parent input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--sb-accent);
    flex: 0 0 auto;
    margin: 0;
}
.serwis-shop__cat-expand {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--sb-muted);
    cursor: pointer;
}
.serwis-shop__cat-expand svg {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
}
.serwis-shop__cat-expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.serwis-shop__cat-expand:hover { color: var(--sb-accent); }

.serwis-shop__cat-children {
    list-style: none;
    margin: 0 0 10px;
    padding: 2px 0 2px 12px;
    border-left: 1px solid rgba(27, 25, 25, 0.1);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.serwis-shop__cat-children[hidden] { display: none; }
.serwis-shop__cat-children label {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    line-height: 1.3;
    color: var(--sb-muted);
    cursor: pointer;
    padding: 5px 0;
}
.serwis-shop__cat-children label:hover { color: var(--sb-ink); }
.serwis-shop__cat-children input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--sb-accent);
    flex: 0 0 auto;
    margin: 0;
}

/* Mobile: parent rows and chevrons need real touch targets in the drawer. */
@media (max-width: 1024px) {
    .serwis-shop__cat-parent { padding: 12px 0; }
    .serwis-shop__cat-expand { width: 44px; height: 44px; }
    .serwis-shop__cat-children label { padding: 9px 0; }
}

/* Price inputs + range track */
.serwis-shop__price-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 4px 0 14px;
    font-size: 13px;
}
.serwis-shop__price-inputs input[type="number"] {
    width: 76px;
    padding: 6px 8px;
    font-size: 13px;
    border: 1px solid rgba(27, 25, 25, 0.18);
    border-radius: 4px;
    background: #fff;
    color: var(--sb-ink);
    -moz-appearance: textfield;
}
.serwis-shop__price-inputs input[type="number"]::-webkit-outer-spin-button,
.serwis-shop__price-inputs input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.serwis-shop__price-sep,
.serwis-shop__price-unit { color: var(--sb-muted); font-size: 13px; }
.serwis-shop__price-range {
    position: relative;
    height: 24px;
    margin: 0 8px;
}
.serwis-shop__price-track {
    position: absolute;
    top: 10px;
    left: 0; right: 0;
    height: 4px;
    background: rgba(27, 25, 25, 0.1);
    border-radius: 2px;
}
.serwis-shop__price-fill {
    position: absolute;
    height: 100%;
    background: var(--sb-accent);
    border-radius: 2px;
}
.serwis-shop__price-handle {
    position: absolute;
    top: 4px;
    width: 16px;
    height: 16px;
    background: #fff;
    border: 2px solid var(--sb-accent);
    border-radius: 50%;
    cursor: grab;
    transform: translateX(-50%);
    touch-action: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.serwis-shop__price-handle:active { cursor: grabbing; }

/* Filter action buttons (Apply, Clear) — pinned outside scrollable filter list,
   so they stay reachable regardless of scroll position. */
.serwis-shop__filter-actions {
    display: flex;
    gap: 8px;
    padding: 14px 16px;
    border-top: 1px solid rgba(27, 25, 25, 0.08);
    background: #fff;
    flex-shrink: 0;
}
.serwis-shop__btn {
    flex: 1;
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    text-decoration: none;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.serwis-shop__btn--apply { background: var(--sb-accent); color: #fff; }
.serwis-shop__btn--apply:hover { background: #6b006c; color: #fff; }
.serwis-shop__btn--clear {
    background: transparent;
    color: var(--sb-ink);
    border: 1px solid rgba(27, 25, 25, 0.18);
}
.serwis-shop__btn--clear:hover { background: rgba(27, 25, 25, 0.05); }

/* Toolbar (count + sort) */
.serwis-shop__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 16px;
    gap: 16px;
    flex-wrap: wrap;
}
.serwis-shop__toolbar .woocommerce-result-count {
    margin: 0;
    color: var(--sb-muted);
    font-size: 14px;
}
.serwis-shop__toolbar .woocommerce-ordering { margin: 0; }
.serwis-shop__toolbar .woocommerce-ordering select.orderby {
    padding: 8px 32px 8px 12px;
    border: 1px solid rgba(27, 25, 25, 0.18);
    border-radius: 6px;
    background: #fff;
    font-size: 13px;
    color: var(--sb-ink);
    cursor: pointer;
    appearance: auto;
}

/* Applied filter chips row */
.serwis-shop__chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 20px;
}
.serwis-shop__chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px 6px 12px;
    background: rgba(138, 0, 139, 0.08);
    border: 1px solid rgba(138, 0, 139, 0.2);
    border-radius: 999px;
    color: var(--sb-ink);
    font-size: 13px;
    text-decoration: none;
    line-height: 1.2;
    transition: background 0.15s ease;
}
.serwis-shop__chip:hover { background: rgba(138, 0, 139, 0.16); }
.serwis-shop__chip svg { width: 14px; height: 14px; color: var(--sb-accent); }
.serwis-shop__chips-clear {
    color: var(--sb-accent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: underline;
    margin-left: 4px;
}
.serwis-shop__chips-clear:hover { color: #6b006c; }

/* Product grid — overrides Woo .products columns-N.
   Card pattern mirrors `serwis-products__card` from home slider: edge-to-edge
   image at top (no inner padding), category eyebrow → title → dual price → dark
   navy CTA. No visible border idle — only subtle border + shadow on hover. */
:is(.serwis-shop__main, .related.products) ul.products {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 24px !important;
}
:is(.serwis-shop__main, .related.products) ul.products li.product {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    clear: none !important;
    list-style: none !important;
    background: #fff;
    border: 1px solid rgba(27, 25, 25, 0.08);
    border-radius: 14px;
    overflow: hidden;
    transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.22s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.22s ease;
    display: flex !important;
    flex-direction: column;
}
:is(.serwis-shop__main, .related.products) ul.products li.product::before,
:is(.serwis-shop__main, .related.products) ul.products li.product::marker {
    content: none !important;
    display: none !important;
}
:is(.serwis-shop__main, .related.products) ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.18),
                0 4px 12px -6px rgba(0, 0, 0, 0.08);
    border-color: rgba(27, 25, 25, 0.14);
}

/* Image — edge-to-edge top */
:is(.serwis-shop__main, .related.products) li.product figure {
    order: 1;
    margin: 0 !important;
    padding: 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 0;
    background: #fff;
    position: relative;
}
:is(.serwis-shop__main, .related.products) li.product figure a,
:is(.serwis-shop__main, .related.products) li.product figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
:is(.serwis-shop__main, .related.products) li.product:hover figure img { transform: scale(1.04); }

/* Category eyebrow (Woo entry-meta) */
:is(.serwis-shop__main, .related.products) li.product .entry-meta {
    order: 2;
    display: block;
    margin: 18px 18px 6px;
    padding: 0;
    list-style: none;
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--sb-muted);
}
:is(.serwis-shop__main, .related.products) li.product .entry-meta li {
    margin: 0;
    padding: 0;
    display: inline;
}
:is(.serwis-shop__main, .related.products) li.product .entry-meta a {
    color: inherit;
    text-decoration: none;
}
:is(.serwis-shop__main, .related.products) li.product .entry-meta a:hover { color: var(--sb-accent); }

/* Title */
:is(.serwis-shop__main, .related.products) li.product .woocommerce-loop-product__title {
    order: 3;
    margin: 0 18px 12px !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    line-height: 1.3 !important;
    color: var(--sb-ink) !important;
    letter-spacing: -0.005em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}
:is(.serwis-shop__main, .related.products) li.product .woocommerce-loop-product__title a {
    color: inherit !important;
    text-decoration: none !important;
}
:is(.serwis-shop__main, .related.products) li.product .woocommerce-loop-product__title a:hover {
    color: var(--sb-accent) !important;
}

/* Price (dual brutto/netto already styled in F-012) */
:is(.serwis-shop__main, .related.products) li.product .price {
    order: 4;
    margin: 0 18px 16px;
    padding: 0;
    font-size: 13px;
    color: var(--sb-ink);
}
:is(.serwis-shop__main, .related.products) li.product .price .serwis-price__brutto {
    font-size: 18px;
    font-weight: 800;
}
:is(.serwis-shop__main, .related.products) li.product .price .serwis-price__netto {
    font-size: 13px;
}
:is(.serwis-shop__main, .related.products) li.product .price .serwis-price__note {
    font-size: 11.5px;
    color: var(--sb-muted);
}

/* CTA — dark navy with right-arrow, full-width */
:is(.serwis-shop__main, .related.products) li.product .ct-woo-card-actions {
    order: 5;
    margin: auto 18px 18px;
    padding: 0;
}
:is(.serwis-shop__main, .related.products) li.product .ct-woo-card-actions a.button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px !important;
    background: var(--sb-blue-900) !important;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    border-radius: 8px !important;
    border: 0 !important;
    transition: background 0.18s ease, transform 0.12s ease;
}
:is(.serwis-shop__main, .related.products) li.product .ct-woo-card-actions a.button::after {
    content: '→';
    display: inline-block;
    font-size: 14px;
    line-height: 1;
    transition: transform 0.18s ease;
}
:is(.serwis-shop__main, .related.products) li.product .ct-woo-card-actions a.button:hover {
    background: var(--sb-accent) !important;
    color: #fff !important;
    transform: translateY(-1px);
}
:is(.serwis-shop__main, .related.products) li.product .ct-woo-card-actions a.button:hover::after {
    transform: translateX(3px);
}

/* No results */
.serwis-shop__no-results {
    padding: 48px 16px;
    text-align: center;
    color: var(--sb-muted);
    font-size: 16px;
    background: rgba(27, 25, 25, 0.03);
    border-radius: 8px;
}

/* Pagination */
.serwis-shop__pagination { margin-top: 32px; display: flex; justify-content: center; }
.serwis-shop__pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    list-style: none;
    margin: 0;
}
.serwis-shop__pagination .page-numbers li { margin: 0; padding: 0; }
.serwis-shop__pagination .page-numbers a,
.serwis-shop__pagination .page-numbers span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    border-radius: 6px;
    border: 1px solid rgba(27, 25, 25, 0.12);
    background: #fff;
    color: var(--sb-ink);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s ease;
}
.serwis-shop__pagination .page-numbers a:hover {
    border-color: var(--sb-accent);
    color: var(--sb-accent);
}
.serwis-shop__pagination .page-numbers .current {
    background: var(--sb-accent);
    border-color: var(--sb-accent);
    color: #fff;
}

/* Mobile pill button (drawer trigger) */
.serwis-shop__mobile-pill { display: none; }

/* Drawer backdrop (mobile only) */
.serwis-shop__drawer-backdrop[hidden] { display: none; }

/* Tablet 1024-1279: 3-col, narrower sidebar */
@media (max-width: 1279px) and (min-width: 1024px) {
    .serwis-shop__layout {
        grid-template-columns: 260px 1fr;
        gap: 28px;
    }
    :is(.serwis-shop__main, .related.products) ul.products {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }
}

/* ≤1023: sidebar becomes off-canvas drawer; tablet portrait keeps 2-col, mobile 1-col */
@media (max-width: 1023px) {
    .serwis-shop__layout {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .serwis-shop__sidebar {
        position: fixed;
        top: 0; left: 0; bottom: 0;
        width: min(360px, 86vw);
        height: 100vh;
        max-height: 100vh;
        z-index: 1000;
        border: 0;
        border-radius: 0;
        transform: translateX(-100%);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        box-shadow: 0 0 40px rgba(0, 0, 0, 0.25);
    }
    body.is-shop-drawer-open .serwis-shop__sidebar { transform: translateX(0); }
    .serwis-shop__sidebar-header { display: flex; }
    body.is-shop-drawer-open .serwis-shop__drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
    body.is-shop-drawer-open { overflow: hidden; }

    /* Tablet portrait (768-1023): 2-col grid */
    :is(.serwis-shop__main, .related.products) ul.products {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 18px !important;
    }

    .serwis-shop__mobile-pill {
        display: inline-flex;
        position: fixed;
        bottom: 16px;
        left: 50%;
        transform: translateX(-50%);
        align-items: center;
        gap: 8px;
        padding: 12px 22px;
        background: var(--sb-ink);
        color: #fff;
        border: 0;
        border-radius: 999px;
        font-size: 14px;
        font-weight: 700;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
        z-index: 50;
        cursor: pointer;
    }
    .serwis-shop__mobile-pill svg { width: 18px; height: 18px; }
    .serwis-shop__mobile-pill-count {
        background: var(--sb-accent);
        padding: 2px 8px;
        border-radius: 999px;
        font-size: 12px;
        margin-left: 4px;
    }

    .serwis-shop__toolbar { margin-bottom: 12px; }
    .serwis-shop__toolbar .woocommerce-result-count { font-size: 13px; }
}

/* Mobile phones (≤767): 1-col grid — full-width cards (per user feedback) */
@media (max-width: 767px) {
    :is(.serwis-shop__main, .related.products) ul.products {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    :is(.serwis-shop__main, .related.products) li.product figure { aspect-ratio: 16 / 10; }
    :is(.serwis-shop__main, .related.products) li.product .entry-meta { margin: 16px 16px 6px; }
    :is(.serwis-shop__main, .related.products) li.product .woocommerce-loop-product__title { margin: 0 16px 10px !important; font-size: 16px !important; }
    :is(.serwis-shop__main, .related.products) li.product .price { margin: 0 16px 14px; }
    :is(.serwis-shop__main, .related.products) li.product .ct-woo-card-actions { margin: auto 16px 16px; }
}

@media (max-width: 480px) {
    .serwis-shop__container { padding: 0 12px; }
}

/* ==========================================================================
   Zaufali nam ([serwis_zaufali]) — partner logo strip
   ========================================================================== */
.serwis-zaufali,
.entry-content .serwis-zaufali {
    position: relative !important;
    padding: clamp(60px, 6.5vw, 96px) 0 !important;
    background-color: #fff !important;
    background-image:
        linear-gradient(rgba(27, 25, 25, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 25, 25, 0.045) 1px, transparent 1px) !important;
    background-size: 48px 48px !important;
    background-position: 0 0, 0 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
}
.serwis-zaufali::before,
.serwis-zaufali::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 64px;
    pointer-events: none;
    z-index: 1;
}
.serwis-zaufali::before { left: 0;  background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,0) 100%); }
.serwis-zaufali::after  { right: 0; background: linear-gradient(270deg, #fff 0%, rgba(255,255,255,0) 100%); }

.serwis-zaufali__inner {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}
.serwis-zaufali__head {
    text-align: center;
    margin-bottom: 44px;
}
.serwis-zaufali__eyebrow {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sb-accent);
}
.serwis-zaufali__heading {
    margin: 0 0 18px;
    font-size: clamp(24px, 2.4vw, 34px);
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--sb-ink);
}
.serwis-zaufali__divider {
    width: 56px;
    height: 3px;
    margin: 0 auto;
    background: var(--sb-accent);
    border-radius: 2px;
}
.serwis-zaufali__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 8px 16px;
    align-items: stretch;
}
.serwis-zaufali__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    padding: 14px 12px;
    border-radius: 10px;
    background: transparent;
    transition: background 0.25s ease, transform 0.25s ease;
}
.serwis-zaufali__cell:hover {
    background: rgba(138, 0, 139, 0.04);
    transform: translateY(-1px);
}
.serwis-zaufali__logo {
    display: block;
    width: auto !important;
    height: auto !important;
    max-width: 100%;
    max-height: 60px;
    object-fit: contain;
    filter: grayscale(1) opacity(0.7);
    transition: filter 0.25s ease, opacity 0.25s ease;
    image-rendering: -webkit-optimize-contrast;
}
.serwis-zaufali__cell:hover .serwis-zaufali__logo {
    filter: grayscale(0) opacity(1);
}

@media (max-width: 1023px) {
    .serwis-zaufali,
    .entry-content .serwis-zaufali { padding: 64px 0 !important; }
    .serwis-zaufali__grid { grid-template-columns: repeat(4, 1fr); }
    .serwis-zaufali__cell { min-height: 88px; }
    .serwis-zaufali__head { margin-bottom: 36px; }
}

@media (max-width: 600px) {
    .serwis-zaufali,
    .entry-content .serwis-zaufali { padding: 48px 0 56px !important; }
    .serwis-zaufali__inner { padding: 0 16px; }
    .serwis-zaufali__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 4px 8px;
    }
    .serwis-zaufali__cell { min-height: 76px; padding: 10px 6px; }
    .serwis-zaufali__logo { max-height: 44px; }
    .serwis-zaufali__head { margin-bottom: 28px; }
}

/* ==========================================================================
   Blog ([serwis_blog_posts]) — dark editorial scroll-snap slider (4/2/1 cards)
   ========================================================================== */
.serwis-blog,
.entry-content .serwis-blog {
    position: relative !important;
    padding: clamp(60px, 6.5vw, 96px) 0 !important;
    margin: 0 !important;
    background-color: var(--sb-blue-900) !important;
    background-image:
        radial-gradient(ellipse 60% 50% at 100% 0%, rgba(138, 0, 139, 0.18), transparent 60%),
        linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px) !important;
    background-size: auto, 48px 48px, 48px 48px !important;
    background-position: 0 0, 0 0, 0 0 !important;
    color: #fff !important;
    overflow: hidden !important;
}
/* Accent stripe na lewej krawędzi — anchor visual + brand color punctuation. */
.serwis-blog::before {
    content: "";
    position: absolute;
    top: 80px;
    bottom: 80px;
    left: 0;
    width: 4px;
    background: var(--sb-accent);
    border-radius: 0 4px 4px 0;
    z-index: 1;
}
/* Duży "BLOG" watermark — editorial poster vibe. */
.serwis-blog__watermark {
    position: absolute;
    top: 32px;
    right: -2vw;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: clamp(200px, 24vw, 380px);
    font-weight: 900;
    line-height: 0.85;
    letter-spacing: -0.04em;
    color: rgba(255, 255, 255, 0.045);
    pointer-events: none;
    user-select: none;
    z-index: 0;
}
.serwis-blog__inner {
    position: relative;
    z-index: 2;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
}
.serwis-blog__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 32px;
    margin: 0 0 48px;
}
.serwis-blog__head { max-width: 720px; }
.serwis-blog__eyebrow {
    margin: 0 0 18px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sb-accent-light);
}
.serwis-blog__heading {
    margin: 0 0 22px;
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.015em;
    color: #fff;
    text-wrap: balance;
}
.serwis-blog__divider {
    width: 56px;
    height: 3px;
    background: var(--sb-accent);
    border-radius: 2px;
    margin: 0 0 22px;
}
.serwis-blog__lead {
    margin: 0;
    font-size: 16px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    max-width: 60ch;
}
.serwis-blog__controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 16px;
    padding-bottom: 4px;
}
.serwis-blog__counter {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
    font-family: 'Archivo', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    color: #fff;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.serwis-blog__counter-current {
    font-size: 34px;
    color: var(--sb-accent-light);
    line-height: 1;
}
.serwis-blog__counter-sep {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.35);
    line-height: 1;
    margin: 0 4px;
}
.serwis-blog__counter-total {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1;
}
.serwis-blog__nav {
    display: flex;
    gap: 8px;
    flex: 0 0 auto;
}
.serwis-blog__arrow {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease,
                border-color 0.18s ease, transform 0.12s ease,
                box-shadow 0.18s ease, opacity 0.2s ease;
}
.serwis-blog__arrow svg { width: 18px; height: 18px; }
.serwis-blog__arrow:hover {
    background: var(--sb-accent);
    color: #fff;
    border-color: var(--sb-accent);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -6px rgba(138, 0, 139, 0.55);
}
.serwis-blog__arrow:active { transform: translateY(0); }
.serwis-blog__arrow:focus-visible {
    outline: 2px solid var(--sb-accent-light);
    outline-offset: 3px;
}
.serwis-blog__arrow:disabled {
    opacity: 0.30;
    cursor: default;
    pointer-events: none;
}

.serwis-blog__track {
    list-style: none !important;
    margin: 0 !important;
    padding: 4px 0 8px !important;
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.serwis-blog__track::-webkit-scrollbar { display: none; }
.serwis-blog__track:focus-visible {
    outline: 2px solid var(--sb-accent);
    outline-offset: 4px;
    border-radius: 4px;
}

.serwis-blog__card {
    position: relative;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 calc((100% - 48px) / 3);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    background: transparent;
    border-radius: 16px;
    filter: drop-shadow(0 14px 18px rgba(0, 0, 0, 0.50));
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
    isolation: isolate;
}
.serwis-blog__card:hover {
    transform: translateY(-6px);
}
.serwis-blog__card::before,
ul.serwis-blog__track > li.serwis-blog__card::before,
ul.serwis-blog__track > li.serwis-blog__card::marker {
    content: none !important;
    display: none !important;
}

.serwis-blog__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f4f4f4;
    border-radius: 16px 16px 0 0;
    transform: translateZ(0);
}
.serwis-blog__img,
.serwis-blog__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
    transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.serwis-blog__card:hover .serwis-blog__img,
.serwis-blog__card:hover .serwis-blog__media img {
    transform: scale(1.03);
}
.serwis-blog__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(27, 25, 25, 0) 60%,
        rgba(27, 25, 25, 0.25) 100%);
    pointer-events: none;
}
.serwis-blog__body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 24px 26px 22px;
    background: #FAF8FA;
    border-radius: 0 0 16px 16px;
}
.serwis-blog__cat {
    margin: 0 0 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sb-accent);
    line-height: 1;
}
.serwis-blog__title {
    margin: 0 0 12px;
    font-size: 19px;
    line-height: 1.25;
    font-weight: 800;
    letter-spacing: -0.012em;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.serwis-blog__title a {
    color: var(--sb-ink) !important;
    text-decoration: none;
    background-image: linear-gradient(var(--sb-accent), var(--sb-accent));
    background-repeat: no-repeat;
    background-size: 0% 2px;
    background-position: 0 100%;
    transition: background-size 0.3s ease, color 0.2s ease;
    padding-bottom: 2px;
}
.serwis-blog__title a:hover {
    color: var(--sb-accent) !important;
    background-size: 100% 2px;
}
.serwis-blog__excerpt {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--sb-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.serwis-blog__footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(27, 25, 25, 0.08);
}
.serwis-blog__date {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--sb-muted);
    white-space: nowrap;
}
.serwis-blog__read {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sb-ink) !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    transition: color 0.2s ease, gap 0.25s ease;
}
.serwis-blog__read-arrow {
    font-size: 16px;
    line-height: 1;
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.serwis-blog__read:hover {
    color: var(--sb-accent) !important;
    gap: 10px;
}
.serwis-blog__read:hover .serwis-blog__read-arrow {
    transform: translateX(2px);
}
.serwis-blog__footer {
    margin-top: 40px;
    text-align: center;
}
.serwis-blog__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: var(--sb-accent);
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 12.5px;
    border-radius: 8px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 2px 8px rgba(138, 0, 139, 0.25);
}
.serwis-blog__cta svg { width: 18px; height: 18px; }
.serwis-blog__cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px -6px rgba(138, 0, 139, 0.45);
    background: var(--sb-blue);
}
.serwis-blog__cta:focus-visible {
    outline: 2px solid var(--sb-accent-light);
    outline-offset: 3px;
}

@media (max-width: 1199px) {
    .serwis-blog__card { flex: 0 0 calc((100% - 24px) / 2); }
}

@media (max-width: 1023px) {
    .serwis-blog,
    .entry-content .serwis-blog { padding: 88px 0 !important; }
    .serwis-blog__header {
        grid-template-columns: 1fr;
        margin-bottom: 36px;
    }
    .serwis-blog__controls {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }
    .serwis-blog__heading { font-size: clamp(28px, 4vw, 36px); }
    .serwis-blog__watermark { font-size: clamp(140px, 26vw, 220px); }
}

@media (max-width: 767px) {
    .serwis-blog,
    .entry-content .serwis-blog { padding: 64px 0 72px !important; }
    .serwis-blog::before { top: 32px; bottom: 32px; }
    .serwis-blog__inner { padding: 0 16px; }
    .serwis-blog__head { max-width: 100%; }
    .serwis-blog__header {
        margin-bottom: 28px;
        gap: 24px;
    }
    .serwis-blog__heading { font-size: clamp(26px, 7vw, 32px); }
    .serwis-blog__lead { font-size: 15px; }
    .serwis-blog__watermark {
        top: 16px;
        right: -8vw;
        font-size: clamp(140px, 36vw, 200px);
    }
    .serwis-blog__counter-current { font-size: 28px; }
    /* Single full-width card carousel: karta wypełnia inner content area
       (.serwis-blog__inner padding 0 16). Następna karta przewija się
       w pełni poza viewport — bez peek. Mirror products pattern. */
    .serwis-blog__track {
        gap: 16px;
        margin: 0 !important;
        padding: 4px 0 8px !important;
        scroll-padding: 0;
    }
    .serwis-blog__card { flex: 0 0 100%; }
    .serwis-blog__body { padding: 22px 22px 24px; }
    .serwis-blog__title {
        font-size: 18px;
        min-height: auto;
        -webkit-line-clamp: 4;
    }
    .serwis-blog__footer { margin-top: 32px; }
}

/* ==========================================================================
   Współpraca z branżami ([serwis_branze]) — dwie kolumny: head + kafel 01 na
   zdjęciu (duotone plum, magentowa półka), obok bento ośmiu sektorów 2+2+4
   (ikona → numer → tytuł) i CTA. Tło: lawendowy wash + ukośne włoski w rogu.
   Grid 4 → 2 → 2 kolumny.
   ========================================================================== */
.serwis-branze,
.entry-content .serwis-branze {
    position: relative !important;
    padding: clamp(60px, 6.5vw, 96px) 0 !important;
    margin: 0 !important;
    background-color: #FBFAFC !important;
    background-image:
        linear-gradient(rgba(27, 25, 25, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 25, 25, 0.05) 1px, transparent 1px),
        radial-gradient(ellipse 760px 440px at 24% 58%, rgba(138, 0, 139, 0.032), transparent 72%),
        linear-gradient(180deg, #FDFDFE 0%, #FAF6FB 52%, #FCFBFD 100%) !important;
    background-size: 48px 48px, 48px 48px, auto, auto !important;
    overflow: hidden !important;
}
/* Wiązka ukośnych włosków w prawym górnym rogu — jedyna dekoracja tła sekcji. */
.serwis-branze::before {
    content: "";
    position: absolute;
    top: 0;
    right: 56px;
    width: 196px;
    height: 300px;
    background-image: repeating-linear-gradient(45deg, rgba(138, 0, 139, 0.14) 0 1.5px, transparent 1.5px 16px);
    -webkit-mask-image: linear-gradient(215deg, #000 6%, rgba(0, 0, 0, 0.35) 42%, transparent 68%);
    mask-image: linear-gradient(215deg, #000 6%, rgba(0, 0, 0, 0.35) 42%, transparent 68%);
    pointer-events: none;
}
.serwis-branze__inner {
    position: relative;
    z-index: 1;
    width: min(1280px, calc(100% - 64px));
    margin: 0 auto;
    padding: 0;
    display: grid;
    grid-template-columns: 43.5% minmax(0, 1fr);
    column-gap: 48px;
    align-items: start;
}
.serwis-branze__lead-col { min-width: 0; }
.serwis-branze__grid-col { min-width: 0; }

.serwis-branze__head { margin: 0 0 34px; }
.serwis-branze__eyebrow {
    display: block;
    margin: 0 0 18px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sb-accent);
}
.serwis-branze__heading {
    margin: 0 0 24px;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: clamp(32px, 3.35vw, 48px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--sb-ink);
}
.serwis-branze__heading em { font-style: normal; color: var(--sb-accent); }
.serwis-branze__lead {
    margin: 0;
    max-width: 48ch;
    font-size: 16px;
    line-height: 1.85;
    color: var(--sb-muted);
}

/* Kafel 01 — sektor wiodący: zdjęcie w duotone (luminosity na plumowym tle),
   scrim od lewej pod tekst, magentowa półka wystająca spod dolnej krawędzi. */
.serwis-branze-feature {
    position: relative;
    isolation: isolate;
}
.serwis-branze-feature::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: -19px;
    z-index: 0;
    width: 53%;
    height: 40px;
    border-radius: 0 0 6px 20px;
    background: #55005A;
}
.serwis-branze-feature__link {
    position: relative;
    z-index: 1;
    display: block;
    min-height: 300px;
    padding: 52px 38px 32px;
    border-radius: 20px;
    overflow: hidden;
    text-decoration: none;
    color: #fff;
    background:
        linear-gradient(150deg, #5E0D68 0%, #3A0742 46%, #14010F 100%),
        var(--sb-blue-900);
    isolation: isolate;
}
.serwis-branze-feature__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) brightness(0.88) contrast(1.18);
}
/* Duotone: warstwa `color` oddaje zdjęciu barwę marki, zostawiając mu jasność. */
.serwis-branze-feature__link::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(150deg, #8A008B 0%, #6A0A72 48%, #2E0435 100%);
    mix-blend-mode: color;
}
.serwis-branze-feature__scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(90deg, rgba(11, 0, 13, 0.94) 0%, rgba(24, 1, 28, 0.9) 28%, rgba(45, 3, 50, 0.58) 58%, rgba(74, 5, 80, 0.08) 100%);
}
.serwis-branze-feature__body { position: relative; z-index: 3; display: block; max-width: 360px; }
.serwis-branze-feature__num {
    display: block;
    margin: 0 0 26px;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 72px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    color: rgba(201, 138, 202, 0.62);
    transition: color .25s ease;
}
.serwis-branze-feature__link:hover .serwis-branze-feature__num { color: var(--sb-accent-light); }
.serwis-branze-feature__title {
    margin: 0 0 22px;
    font-family: 'Archivo', system-ui, sans-serif;
    max-width: 11ch;
    font-size: 32px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
}
.serwis-branze-feature__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.serwis-branze-feature__tag {
    padding: 6px 16px;
    border: 1px solid rgba(255, 255, 255, 0.34);
    border-radius: 999px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px;
    line-height: 1.4;
    color: rgba(255, 255, 255, 0.88);
    white-space: nowrap;
}

/* Znak wodny marki pod kaflem 01 — wypełnia światło, które zostaje w lewej
   kolumnie, gdy prawa rośnie do czterech rzędów. Dekoracja: aria-hidden w HTML. */
.serwis-branze__wordmark {
    margin: 44px 0 0;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: clamp(56px, 8.8vw, 112px);
    line-height: 0.78;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: rgba(138, 0, 139, 0.055);
    user-select: none;
    pointer-events: none;
}

.serwis-branze__grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(167px, auto);
    gap: 12px;
}

/* Kafle leżą bez własnego tła wprost na siatce sekcji. */
.serwis-branze-card {
    border-radius: 14px;
    transition: transform .2s ease;
}
.serwis-branze-card:hover { transform: translateY(-3px); }
.serwis-branze-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 23px 20px 23px 26px;
    text-decoration: none;
    color: inherit;
}
/* Konturowy numer: line-height 0.75 przycina pudełko do wysokości cyfr, żeby
   kafel trzymał 167 px z mockupu zamiast rosnąć o światło wiersza. Cyfry są
   wypełnione siatką rysunkową — `background-clip: text` przycina trzy warstwy
   tła (dwie linie siatki + płaski odcień) do kształtu glifów. */
.serwis-branze-card__num {
    display: block;
    margin: 0 0 26px;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 68px;
    font-weight: 800;
    line-height: 0.75;
    letter-spacing: -0.04em;
    font-variant-numeric: tabular-nums;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.28) 1px, transparent 1px),
        linear-gradient(var(--serwis-num-tint), var(--serwis-num-tint));
    background-size: 9px 9px, 9px 9px, 100% 100%;
    background-position: 0 0, 0 0, 0 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
/* Odcień słabnie parami: rząd 02–03 startuje od plum masztu kontaktu
   (--sb-blue-900), 08–09 kończy na plumie bliskim akcentowi. */
.serwis-branze-card { --serwis-num-tint: #2E002E; }
.serwis-branze-card:nth-child(n+3) { --serwis-num-tint: #45034A; }
.serwis-branze-card:nth-child(n+5) { --serwis-num-tint: #5F0663; }
.serwis-branze-card:nth-child(n+7) { --serwis-num-tint: #7E0A80; }
.serwis-branze-card:hover { --serwis-num-tint: var(--sb-accent); }
.serwis-branze-card__row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: auto;
}
.serwis-branze-card__icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    color: var(--sb-accent);
}
.serwis-branze-card__icon svg { width: 100%; height: 100%; display: block; }
.serwis-branze-card__title {
    flex: 1 1 auto;
    margin: 0;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 700;
    letter-spacing: -0.015em;
    /* Blocksy łamie długie słowa w środku; tytuły sektorów mają się łamać na spacjach. */
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
    color: var(--sb-ink);
}
.serwis-branze-card__chev {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    color: var(--sb-accent);
    transition: transform .2s ease;
}
.serwis-branze-card:hover .serwis-branze-card__chev { transform: translateX(3px); }

.serwis-branze__cta { margin: 36px 0 0; text-align: center; }
.serwis-branze__cta a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--sb-accent);
    text-decoration: none;
}
.serwis-branze__cta svg { width: 15px; height: 15px; transition: transform .25s ease; }
.serwis-branze__cta a:hover svg { transform: translateX(3px); }

@media (max-width: 1024px) {
    .serwis-branze::before { right: 24px; width: 150px; height: 220px; }
    .serwis-branze__inner {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 44px;
    }
    .serwis-branze__lead { max-width: 62ch; }
    .serwis-branze-feature__link { min-height: 260px; padding: 40px 32px 28px; }
    .serwis-branze-feature__num { font-size: 58px; margin-bottom: 20px; }
    .serwis-branze-feature__title { font-size: 28px; }
    .serwis-branze__wordmark { margin-top: 30px; }
    .serwis-branze__grid { gap: 14px; }
}
@media (max-width: 767px) {
    .serwis-branze__inner { width: calc(100% - 32px); row-gap: 34px; }
    .serwis-branze__eyebrow { font-size: 13px; margin-bottom: 14px; }
    .serwis-branze__heading { margin-bottom: 18px; }
    .serwis-branze__lead { font-size: 15px; line-height: 1.7; }
    .serwis-branze__head { margin-bottom: 26px; }
    .serwis-branze-feature::before { bottom: -14px; height: 30px; }
    .serwis-branze-feature__link { min-height: 220px; padding: 28px 22px 24px; border-radius: 16px; }
    .serwis-branze-feature__num { font-size: 46px; margin-bottom: 16px; }
    .serwis-branze-feature__title { font-size: 22px; margin-bottom: 16px; }
    .serwis-branze-feature__tag { font-size: 10px; padding: 5px 12px; }
    .serwis-branze__wordmark { margin-top: 24px; }
    .serwis-branze__grid { gap: 10px; grid-auto-rows: minmax(138px, auto); }
    .serwis-branze-card { border-radius: 12px; }
    .serwis-branze-card__link { padding: 16px 14px 16px 16px; }
    .serwis-branze-card__num {
        font-size: 40px;
        margin-bottom: 14px;
        background-size: 6px 6px, 6px 6px, 100% 100%;
        background-position: 0 0, 0 0, 0 0;
    }
    /* Dwie kolumny po 155 px: ikona wchodzi nad tytuł, strzałka znika. */
    .serwis-branze-card__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .serwis-branze-card__icon { flex: 0 0 30px; width: 30px; height: 30px; }
    .serwis-branze-card__chev { display: none; }
    .serwis-branze-card__title { font-size: 14px; line-height: 1.35; }
    .serwis-branze__cta { margin-top: 28px; }
}

/* ==========================================================================
   Magazyny w Europie ([serwis_magazyny_eu]) — editorial split: head + panel
   z listą magazynów wybranego kraju z lewej, kontur UE (inline SVG) z pinezkami
   -przyciskami z prawej. Split → stack na mobile (head → mapa → panel).
   ========================================================================== */
/* !important: Blocksy stylizuje bezpośrednie dzieci `.entry-content` (margines,
   tło, padding) selektorem o wyższej specyficzności niż pojedyncza klasa sekcji. */
.serwis-magazyny-eu,
.entry-content .serwis-magazyny-eu {
    position: relative !important;
    padding: clamp(60px, 6.5vw, 96px) 0 !important;
    margin: 0 !important;
    background-color: #fff !important;
    background-image:
        linear-gradient(rgba(27, 25, 25, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 25, 25, 0.03) 1px, transparent 1px) !important;
    background-size: 32px 32px !important;
    overflow: hidden !important;
}
.serwis-magazyny-eu__inner {
    position: relative;
    z-index: 1;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas:
        "head map"
        "panel map";
    column-gap: clamp(44px, 5vw, 88px);
    align-items: center;
}
.serwis-magazyny-eu__head  { grid-area: head; align-self: end; margin: 0; }
.serwis-magazyny-eu__panel { grid-area: panel; align-self: start; }
.serwis-magazyny-eu__map   { grid-area: map; }

.serwis-magazyny-eu__eyebrow {
    display: block;
    margin: 0 0 14px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sb-accent);
}
.serwis-magazyny-eu__heading {
    margin: 0;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.025em;
    color: var(--sb-ink);
}
.serwis-magazyny-eu__divider {
    width: 56px;
    height: 3px;
    margin: 20px 0;
    background: var(--sb-accent);
    border-radius: 2px;
}
.serwis-magazyny-eu__lead {
    margin: 0 0 30px;
    max-width: 46ch;
    font-size: 15px;
    line-height: 1.6;
    color: var(--sb-muted);
}

.serwis-magazyny-eu__legend {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin: 0;
    padding: 0 0 10px;
    border-bottom: 2px solid var(--sb-ink);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sb-muted);
}
.serwis-magazyny-eu__legend strong { color: var(--sb-accent); font-weight: 600; }

/* Wysokość pod najdłuższy kraj (6 miast) — bez tego przełączenie kraju przesuwa notę
   i przy `align-items: center` skacze cała kolumna. */
.serwis-magazyny-eu__lists { min-height: 268px; padding-top: 18px; }

.serwis-magazyny-eu__country-name {
    margin: 0;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--sb-ink);
}
.serwis-magazyny-eu__badge {
    display: inline-block;
    margin: 8px 0 0;
    padding: 4px 9px;
    border: 1px solid var(--sb-border);
    border-radius: 2px;
    background: var(--sb-surface);
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--sb-accent);
}
.serwis-magazyny-eu__count {
    margin: 8px 0 0;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sb-muted);
}
.serwis-magazyny-eu__count strong { color: var(--sb-accent); font-weight: 600; }
.serwis-magazyny-eu__cities {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    columns: 2;
    column-gap: 32px;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 12.5px;
    line-height: 2.05;
    color: var(--sb-ink);
}
.serwis-magazyny-eu__cities li { break-inside: avoid; }
.serwis-magazyny-eu__cities li::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 10px;
    border-radius: 50%;
    background: var(--sb-accent);
    vertical-align: 1px;
}
.serwis-magazyny-eu__note {
    margin: 24px 0 0;
    padding-top: 16px;
    border-top: 1px solid rgba(27, 25, 25, 0.12);
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 14.5px;
    font-weight: 700;
    color: var(--sb-ink);
}
.serwis-magazyny-eu__note strong { color: var(--sb-accent); font-weight: 700; }

.serwis-magazyny-eu__map {
    position: relative;
    margin: 0;
    padding: 18px 18px 10px;
}
.serwis-magazyny-eu__map::before,
.serwis-magazyny-eu__map::after {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    border: 0 solid var(--sb-border);
}
.serwis-magazyny-eu__map::before { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.serwis-magazyny-eu__map::after  { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.serwis-magazyny-eu__canvas { position: relative; }
.serwis-magazyny-eu__canvas svg { display: block; width: 100%; height: auto; }

/* Kreska konturu w jednostkach viewBox skalowałaby się z mapą (0,6 px przy szerokości
   kolumny) — non-scaling-stroke trzyma ją na 1 px niezależnie od rozmiaru. */
.serwis-magazyny-eu__shape {
    fill: rgba(27, 25, 25, 0.045);
    stroke: var(--sb-border-soft);
    stroke-width: 1;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
}
/* Kraje sprzedaży: wypełnienie zostaje tu, kreska przenosi się na warstwę
   `__outline` — tylko osobna ścieżka bez fill daje się rysować dashoffsetem. */
.serwis-magazyny-eu__shape--sales {
    fill: rgba(138, 0, 139, 0.10);
    stroke: none;
    transition: fill 180ms ease;
}
.serwis-magazyny-eu__shape--sales.is-active { fill: rgba(138, 0, 139, 0.30); }
.serwis-magazyny-eu__outline {
    fill: none;
    stroke: var(--sb-border);
    stroke-width: 1;
    stroke-linejoin: round;
    vector-effect: non-scaling-stroke;
    transition: stroke 180ms ease;
}
.serwis-magazyny-eu__outline.is-active {
    stroke: var(--sb-accent);
    stroke-width: 1.6;
}

.serwis-magazyny-eu__pins { position: absolute; inset: 0; }
.serwis-magazyny-eu__pin {
    position: absolute;
    transform: translate(-50%, -50%);
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    cursor: pointer;
}
.serwis-magazyny-eu__pin:focus-visible {
    outline: 2px solid var(--sb-accent);
    outline-offset: 1px;
}
.serwis-magazyny-eu__pin-dot {
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--sb-accent);
    box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(138, 0, 139, 0.28);
    transition: width 150ms ease, height 150ms ease;
}
.serwis-magazyny-eu__pin:hover .serwis-magazyny-eu__pin-dot,
.serwis-magazyny-eu__pin[aria-pressed="true"] .serwis-magazyny-eu__pin-dot {
    width: 16px;
    height: 16px;
    box-shadow: 0 0 0 3px #fff, 0 0 0 5px rgba(138, 0, 139, 0.45);
}
/* Kraj spoza UE — pinezka wydrążona, żeby granica rynku była widoczna bez czytania noty. */
.serwis-magazyny-eu__pin--poza-ue .serwis-magazyny-eu__pin-dot {
    background: #fff;
    border: 3px solid var(--sb-accent);
}
.serwis-magazyny-eu__pin-name {
    position: absolute;
    top: 50%;
    white-space: nowrap;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    color: var(--sb-muted);
    pointer-events: none;
}
.serwis-magazyny-eu__pin[aria-pressed="true"] .serwis-magazyny-eu__pin-name {
    font-weight: 600;
    color: var(--sb-ink);
}
.serwis-magazyny-eu__pin--start  .serwis-magazyny-eu__pin-name { left: 100%; transform: translate(2px, -50%); }
.serwis-magazyny-eu__pin--end    .serwis-magazyny-eu__pin-name { right: 100%; transform: translate(-2px, -50%); }
.serwis-magazyny-eu__pin--middle .serwis-magazyny-eu__pin-name { top: 0; left: 50%; transform: translate(-50%, -100%); }

.serwis-magazyny-eu__caption {
    margin: 14px 0 0;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 10.5px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--sb-muted);
    text-align: right;
}
.serwis-magazyny-eu__caption strong { color: var(--sb-accent); font-weight: 600; }

@media (max-width: 980px) {
    .serwis-magazyny-eu__inner {
        grid-template-columns: 1fr;
        grid-template-areas: "head" "map" "panel";
        row-gap: 36px;
        padding: 0 24px;
    }
    .serwis-magazyny-eu__lead { margin-bottom: 0; }
    .serwis-magazyny-eu__map { max-width: 560px; width: 100%; justify-self: center; }
}
@media (max-width: 560px) {
    .serwis-magazyny-eu__inner { padding: 0 16px; }
    .serwis-magazyny-eu__map { padding: 12px 6px 6px; }
    .serwis-magazyny-eu__caption { text-align: left; }
    .serwis-magazyny-eu__cities { column-gap: 20px; font-size: 12px; }
    .serwis-magazyny-eu__lists { min-height: 234px; }
    .serwis-magazyny-eu__pin { width: 24px; height: 24px; }
    /* Etykiety wszystkich pinezek nie mieszczą się na 375 px — zostaje nazwa
       aktywnego kraju (dublowana nagłówkiem panelu) i etykieta po najechaniu. */
    .serwis-magazyny-eu__pin-name { opacity: 0; transition: opacity 150ms ease; }
    .serwis-magazyny-eu__pin:hover .serwis-magazyny-eu__pin-name,
    .serwis-magazyny-eu__pin:focus-visible .serwis-magazyny-eu__pin-name,
    .serwis-magazyny-eu__pin[aria-pressed="true"] .serwis-magazyny-eu__pin-name { opacity: 1; }
}

/* ==========================================================================
   Blog archive page — Blocksy default markup, styled to match brand.
   Targets .hero-section, .entries[data-cards="boxed"], article.entry-card.
   ========================================================================== */

/* Hero — dark editorial masthead, spójny z .serwis-kontakt-masthead (F-035):
   blueprint grid + 6px accent bar, zero glow. Blocksy renderuje tytuł w wąskim
   wyśrodkowanym kontenerze; rozszerzamy .entry-header do normalnego kontenera,
   żeby nagłówek wyrównał się do siatki artykułów i czytał do lewej. */
body.blog .hero-section,
body.archive:not(.woocommerce) .hero-section {
    position: relative;
    overflow: hidden;
    background-color: var(--sb-blue-900) !important;
    /* Blueprint grid (białe hairline) — DNA „rysunek techniczny"; !important bije tło Blocksy hero. */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
    background-size: 48px 48px !important;
    background-position: 0 0, 0 0 !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: clamp(40px, 6vw, 76px) !important;
    padding-bottom: clamp(40px, 5vw, 64px) !important;
}
/* 6px accent bar przy lewej krawędzi — echo .serwis-kontakt-masthead__accent
   (markup hero jest Blocksy, więc realizujemy go pseudo-elementem). */
body.blog .hero-section::before,
body.archive:not(.woocommerce) .hero-section::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--sb-accent);
    z-index: 1;
}
body.blog .hero-section .entry-header,
body.archive:not(.woocommerce) .hero-section .entry-header {
    max-width: var(--theme-normal-container-max-width, 1290px) !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    text-align: left !important;
}

/* Breadcrumb */
body.blog .hero-section .ct-breadcrumbs,
body.archive:not(.woocommerce) .hero-section .ct-breadcrumbs {
    margin-bottom: 18px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
body.blog .hero-section .ct-breadcrumbs a,
body.archive:not(.woocommerce) .hero-section .ct-breadcrumbs a {
    color: var(--sb-accent-light) !important;
    text-decoration: none;
    transition: color 0.2s;
}
body.blog .hero-section .ct-breadcrumbs a:hover,
body.archive:not(.woocommerce) .hero-section .ct-breadcrumbs a:hover {
    color: #fff !important;
}

/* Title — type tokens spójne z .serwis-kontakt-masthead__title (Archivo 900, tight). */
body.blog .hero-section .page-title,
body.archive:not(.woocommerce) .hero-section .page-title {
    margin: 0;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: clamp(36px, 5.2vw, 64px);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.03em;
    color: #fff;
    max-width: 18ch;
}

/* Subtitle (injected via blocksy:hero:title:after) — tokeny jak .serwis-kontakt-masthead__sub. */
.serwis-bloghero__subtitle {
    margin: 20px 0 0;
    max-width: 560px;
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}

/* Category filter row — pill links (Vercel/Linear-style index nav) */
.serwis-bloghero__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}
.serwis-bloghero__filter {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.serwis-bloghero__filter:hover {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.32);
    color: #fff;
}
.serwis-bloghero__filter.is-active {
    background: var(--sb-accent);
    border-color: var(--sb-accent);
    color: #fff;
}

/* Grid container */
body.blog .entries[data-layout="grid"],
body.archive .entries[data-layout="grid"] {
    gap: 28px !important;
}

/* ──────────────────────────────────────────────────────────────────────────
   Cards — borderless, image-forward editorial (Stripe / Linear / Vercel-style):
   no cream box, border or shadow — a rounded image + whitespace carry the card.
   First card = full-width featured lead (image left, text centered right).
   ────────────────────────────────────────────────────────────────────────── */
body.blog article.entry-card,
body.archive article.entry-card {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
}

/* Image — rounded, forced 16:9 (Blocksy inlines aspect-ratio:4/3 → !important) */
body.blog .entry-card .ct-media-container,
body.archive .entry-card .ct-media-container {
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 12px !important;
    overflow: hidden;
    background: var(--sb-surface);
}
body.blog .entry-card .ct-media-container img,
body.archive .entry-card .ct-media-container img {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    width: 100%;
    object-fit: cover;
    border-radius: 12px !important;
    transition: transform 0.5s ease;
}
body.blog .entry-card:hover .ct-media-container img,
body.archive .entry-card:hover .ct-media-container img {
    transform: scale(1.05);
}

/* Category — small uppercase label (no pill) */
body.blog .entry-card .entry-meta,
body.archive .entry-card .entry-meta {
    padding: 16px 0 0 !important;
    margin: 0 !important;
}
body.blog .entry-card .meta-categories a,
body.archive .entry-card .meta-categories a {
    color: var(--sb-accent) !important;
    font-size: 11px !important;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none !important;
    transition: color 0.2s;
}
body.blog .entry-card .meta-categories a:hover,
body.archive .entry-card .meta-categories a:hover {
    color: var(--sb-blue) !important;
}

/* Title */
body.blog .entry-card .entry-title,
body.archive .entry-card .entry-title {
    padding: 9px 0 0 !important;
    margin: 0 !important;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
body.blog .entry-card .entry-title a,
body.archive .entry-card .entry-title a {
    color: var(--sb-ink) !important;
    text-decoration: none !important;
    transition: color 0.2s;
}
body.blog .entry-card .entry-title a:hover,
body.archive .entry-card .entry-title a:hover {
    color: var(--sb-accent) !important;
}

/* Excerpt */
body.blog .entry-card .entry-excerpt,
body.archive .entry-card .entry-excerpt {
    padding: 8px 0 0 !important;
    margin: 0 !important;
    font-size: 14px;
    line-height: 1.55;
    color: var(--sb-muted);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Blocksy's default read-more button — hidden; the whole card title is the link */
body.blog .entry-card .entry-button,
body.archive .entry-card .entry-button {
    display: none !important;
}

/* Excerpt only on the featured lead — grid cards stay clean (image/category/title/date) */
body.blog .entries article.entry-card:not(:first-child) .entry-excerpt,
body.archive .entries article.entry-card:not(:first-child) .entry-excerpt {
    display: none !important;
}

/* Date (injected via blocksy:loop:card:end) — single muted meta line, no divider */
.serwis-card__date {
    display: block;
    margin-top: 10px;
    font-size: 12.5px;
    letter-spacing: 0.01em;
    color: var(--sb-muted);
}

/* ── Featured lead post (first card): image left, text centered right ── */
body.blog .entries[data-layout="grid"] article.entry-card:first-child,
body.archive .entries[data-layout="grid"] article.entry-card:first-child {
    grid-column: 1 / -1;
    position: relative;
    min-height: 380px;
    justify-content: center;
    padding-left: 53% !important;
    margin-bottom: 8px;
}
body.blog .entry-card:first-child .ct-media-container,
body.archive .entry-card:first-child .ct-media-container {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 49% !important;
    max-width: 49% !important;
    height: 100% !important;
    border-radius: 14px !important;
}
body.blog .entry-card:first-child .ct-media-container img,
body.archive .entry-card:first-child .ct-media-container img {
    height: 100% !important;
    aspect-ratio: auto !important;
    object-fit: cover;
}
body.blog .entry-card:first-child .entry-meta,
body.archive .entry-card:first-child .entry-meta { padding-top: 0 !important; }
body.blog .entry-card:first-child .entry-title,
body.archive .entry-card:first-child .entry-title {
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.18;
    -webkit-line-clamp: 3;
}
body.blog .entry-card:first-child .entry-excerpt,
body.archive .entry-card:first-child .entry-excerpt {
    font-size: 15px;
    -webkit-line-clamp: 3;
}

/* ── Blog archive — responsive ── */
@media (max-width: 600px) {
    body.blog .hero-section,
    body.archive:not(.woocommerce) .hero-section {
        padding-top: 32px !important;
        padding-bottom: 30px !important;
    }
    .serwis-bloghero__filters { margin-top: 18px; gap: 8px; }
    .serwis-bloghero__filter { padding: 7px 13px; font-size: 12.5px; }
    body.blog .entries[data-layout="grid"],
    body.archive .entries[data-layout="grid"] {
        gap: 20px !important;
    }
    body.blog .entry-card .entry-meta,
    body.archive .entry-card .entry-meta {
        padding-top: 14px !important;
    }
    body.blog .entry-card .entry-title,
    body.archive .entry-card .entry-title {
        font-size: 17px;
    }
    body.blog .entry-card .entry-excerpt,
    body.archive .entry-card .entry-excerpt {
        font-size: 13.5px;
    }
}

/* Featured lead post collapses to a normal stacked card below tablet width */
@media (max-width: 800px) {
    body.blog .entries[data-layout="grid"] article.entry-card:first-child,
    body.archive .entries[data-layout="grid"] article.entry-card:first-child {
        padding-left: 0 !important;
        min-height: 0 !important;
        margin-bottom: 0;
    }
    body.blog .entry-card:first-child .ct-media-container,
    body.archive .entry-card:first-child .ct-media-container {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }
    body.blog .entry-card:first-child .ct-media-container img,
    body.archive .entry-card:first-child .ct-media-container img {
        height: auto !important;
        aspect-ratio: 16 / 9 !important;
    }
    body.blog .entry-card:first-child .entry-meta,
    body.archive .entry-card:first-child .entry-meta {
        padding-top: 16px !important;
    }
    body.blog .entry-card:first-child .entry-title,
    body.archive .entry-card:first-child .entry-title {
        font-size: 20px;
        -webkit-line-clamp: 2;
    }
    body.blog .entry-card:first-child .entry-excerpt,
    body.archive .entry-card:first-child .entry-excerpt {
        -webkit-line-clamp: 2;
    }
}

/* ==========================================================================
   F-031 — Single post (article): airy, CENTERED editorial reading layout.
   Centered title + meta → contained centered feature image → narrow centered
   reading column (serif body), centered headings + pull-quotes, end ornament.
   Generous whitespace. Comments removed (functions.php).
   ========================================================================== */

/* Header — light, CENTERED title + meta, lots of air */
body.single-post .hero-section {
    position: relative;
    min-height: 0 !important;
    background: #fff !important;
    background-image: none !important;
    padding-top: clamp(40px, 6vw, 96px) !important;
    padding-bottom: clamp(16px, 2.5vw, 28px) !important;
}
/* hide Blocksy's hero image (re-shown as a banner), its meta + over-image excerpt */
body.single-post .hero-section .ct-media-container,
body.single-post .hero-section .entry-meta,
body.single-post .hero-section .page-description {
    display: none !important;
}
body.single-post .hero-section .entry-header {
    max-width: 760px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: 0 24px !important;
    text-align: center !important;
    display: block !important;
}
body.single-post .hero-section .page-title {
    margin: 0 auto !important;
    max-width: 680px;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: clamp(30px, 4vw, 50px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.02em;
    color: var(--sb-ink);
}
.serwis-post__meta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 12px;
    margin-top: 22px;
    font-size: 13.5px;
    color: var(--sb-muted);
}
.serwis-post__meta-sep { color: rgba(27, 25, 25, 0.28); }
.serwis-post__meta-cat {
    color: var(--sb-accent) !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none !important;
}

/* Feature image — centered, contained */
.serwis-post__cover {
    max-width: 860px;
    margin: clamp(26px, 4vw, 48px) auto clamp(40px, 6vw, 68px);
    padding: 0 24px;
}
.serwis-post__cover img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 14px;
}

/* Reading column — narrow, centered, airy, serif body */
body.single-post .entry-content {
    max-width: 680px !important;
    margin: 0 auto !important;
    padding: 0 24px;
    font-family: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif;
    font-size: 19px;
    line-height: 1.85;
    color: #2A2727;
}
body.single-post .entry-content > p { margin: 0 0 1.6em; }
body.single-post .entry-content > p:first-of-type {
    font-size: 21px;
    line-height: 1.72;
}
/* Headings — centered, airy, sans (brand), small magenta rule above h2 */
body.single-post .entry-content h2,
body.single-post .entry-content h3 {
    font-family: 'Archivo', system-ui, sans-serif;
    text-align: center;
    color: var(--sb-ink);
}
body.single-post .entry-content h2 {
    max-width: 600px;
    margin: 2.4em auto 0.9em;
    font-size: clamp(22px, 2.4vw, 28px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
}
body.single-post .entry-content h2::before {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    margin: 0 auto 22px;
    background: var(--sb-accent);
    border-radius: 2px;
}
body.single-post .entry-content h3 {
    margin: 2em auto 0.6em;
    font-size: clamp(18px, 2vw, 21px);
    font-weight: 700;
}
body.single-post .entry-content a {
    color: var(--sb-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
body.single-post .entry-content a:hover { color: var(--sb-blue); }
body.single-post .entry-content ul,
body.single-post .entry-content ol { margin: 0 0 1.6em; padding-left: 1.4em; }
body.single-post .entry-content li { margin: 0 0 0.6em; }
body.single-post .entry-content ul li::marker { color: var(--sb-accent); }
/* Pull-quote — centered, bold, larger, airy */
body.single-post .entry-content blockquote {
    max-width: 600px;
    margin: 2.4em auto;
    padding: 0;
    border: 0;
    text-align: center;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: clamp(22px, 2.6vw, 28px);
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
    font-style: normal;
    color: var(--sb-ink);
}
body.single-post .entry-content blockquote p { margin: 0 0 0.5em; }
body.single-post .entry-content blockquote p:last-child { margin: 0; }
/* Images / figures — centered, rounded, airy */
body.single-post .entry-content img { border-radius: 12px; }
body.single-post .entry-content figure { margin: 2em auto; text-align: center; }
body.single-post .entry-content figcaption {
    margin-top: 10px;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 13px;
    color: var(--sb-muted);
    text-align: center;
}

/* End-of-article — centered three-dot ornament + back-to-blog link */
.serwis-post__foot {
    max-width: 680px;
    margin: clamp(48px, 7vw, 84px) auto 0;
    padding: 0 24px;
    text-align: center;
}
.serwis-post__ornament {
    position: relative;
    display: block;
    width: 7px;
    height: 7px;
    margin: 0 auto clamp(30px, 4vw, 44px);
    border-radius: 50%;
    background: var(--sb-accent);
}
.serwis-post__ornament::before,
.serwis-post__ornament::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--sb-border);
}
.serwis-post__ornament::before { left: -16px; }
.serwis-post__ornament::after { right: -16px; }
.serwis-post__back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Archivo', system-ui, sans-serif;
    color: var(--sb-accent) !important;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none !important;
    transition: gap 0.18s ease, color 0.18s ease;
}
.serwis-post__back::before { content: "\2190"; }
.serwis-post__back:hover { color: var(--sb-blue) !important; gap: 12px; }

/* ── Single post — responsive ── */
@media (max-width: 600px) {
    body.single-post .hero-section {
        padding-top: 28px !important;
        padding-bottom: 10px !important;
    }
    body.single-post .hero-section .entry-header,
    .serwis-post__cover,
    body.single-post .entry-content,
    .serwis-post__foot { padding-left: 20px; padding-right: 20px; }
    .serwis-post__cover { margin-bottom: 34px; }
    body.single-post .entry-content { font-size: 18px; line-height: 1.8; }
    body.single-post .entry-content > p:first-of-type { font-size: 19px; }
}

/* ==========================================================================
   F-033 — Strona "O nas" ([serwis_o_nas]) — full-bleed editorial.
   Hero (zdjęcie) → historia (split) → filary → proces → CTA.
   Motyw koloruje nagłówki w .entry-content (bije nasze klasy) — resetujemy je
   na inherit i ustawiamy kolor bazowy per sekcja (nagłówki dziedziczą).
   ========================================================================== */

/* Sekcje są .alignfull → full-bleed; zdejmij Gutenbergowy flow-spacing + reset
   kolorów nagłówków z motywu (dziedziczą kolor sekcji). Klasa z body_class, nie
   ID posta — tłumaczenia stron mają własne ID. Dotyczy też /kontakt/ (F-035). */
body.serwis-page-fullbleed .entry-content { padding: 0 !important; }
body.serwis-page-fullbleed .entry-content > * { margin-block: 0 !important; }
body.serwis-page-fullbleed .entry-content :is(h1, h2, h3) { color: inherit; }

/* ── Wspólne ── */
.serwis-onas__inner { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 44px); }
.serwis-onas__eyebrow {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sb-accent);
}
.serwis-onas__eyebrow--light { color: var(--sb-accent-light); }
.serwis-onas__heading {
    margin: 0;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: clamp(28px, 3.6vw, 42px);
    font-weight: 800;
    line-height: 1.14;
    letter-spacing: -0.025em;
}
.serwis-onas__rule { display: block; width: 54px; height: 3px; margin: 22px 0; background: var(--sb-accent); border-radius: 2px; }
.serwis-onas__head { max-width: 660px; margin: 0 auto clamp(40px, 5vw, 64px); text-align: center; }

.serwis-onas__btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 10px;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.serwis-onas__btn svg { width: 18px; height: 18px; flex: 0 0 auto; }
.serwis-onas__btn--primary { background: var(--sb-accent); color: #fff !important; }
.serwis-onas__btn--primary:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(138, 0, 139, .36); }
.serwis-onas__btn--ghost { background: rgba(255, 255, 255, .06); color: #fff !important; border: 1.5px solid rgba(255, 255, 255, .45); }
.serwis-onas__btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .12); }
.serwis-onas__btn--white { background: #fff; color: var(--sb-blue) !important; }
.serwis-onas__btn--white:hover { transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0, 0, 0, .22); }

/* ── Header "O nas" — wycentrowany page-header (inspiracja: About Us refs):
   ciemny plum + magenta poświata + siatka, breadcrumb na górze, pasek liczb ── */
.serwis-onas-header {
    position: relative;
    overflow: hidden;
    padding: clamp(48px, 7vw, 92px) 0 clamp(44px, 6vw, 76px);
    background-color: var(--sb-blue-900);
    color: #fff;
    text-align: center;
}
.serwis-onas-header__glow {
    position: absolute;
    left: 50%;
    top: -42%;
    width: min(920px, 92%);
    height: 620px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side, rgba(138, 0, 139, 0.45), transparent 70%);
    pointer-events: none;
}
.serwis-onas-header__inner { position: relative; z-index: 1; }
.serwis-onas-header__crumbs {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.serwis-onas-header__crumbs a { color: var(--sb-accent-light); text-decoration: none; transition: color .2s; }
.serwis-onas-header__crumbs a:hover { color: #fff; }
.serwis-onas-header__eyebrow {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sb-accent-light);
}
.serwis-onas-header__title {
    margin: 0;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: clamp(46px, 7vw, 82px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.03em;
}
.serwis-onas-header__accent { color: var(--sb-accent-light); }
.serwis-onas-header__sub {
    margin: 20px auto 0;
    max-width: 580px;
    font-size: clamp(15px, 1.5vw, 18px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}
.serwis-onas-header__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(24px, 4vw, 58px);
    margin: clamp(38px, 4.5vw, 54px) auto 0;
    padding: clamp(28px, 3vw, 36px) 0 0;
    max-width: 840px;
    list-style: none;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
}
.serwis-onas-header__stats li { display: flex; flex-direction: column; }
.serwis-onas-header__stat-num { font-family: 'Archivo', system-ui, sans-serif; font-size: clamp(28px, 3vw, 40px); font-weight: 900; line-height: 1; letter-spacing: -0.02em; color: #fff; }
.serwis-onas-header__stat-label { margin-top: 8px; font-size: 13px; letter-spacing: .02em; color: rgba(255, 255, 255, 0.6); }

/* ── Historia (split) ── */
.serwis-onas-story {
    position: relative;
    overflow: hidden;
    padding: clamp(60px, 8vw, 110px) 0;
    background-color: #fff;
    background-image:
        radial-gradient(circle at -3% 52%, transparent 148px, rgba(58, 0, 58, 0.09) 148px 150px, transparent 150px),
        radial-gradient(circle at -3% 52%, transparent 252px, rgba(58, 0, 58, 0.06) 252px 254px, transparent 254px),
        radial-gradient(circle at -3% 52%, transparent 356px, rgba(58, 0, 58, 0.038) 356px 358px, transparent 358px);
    color: var(--sb-ink);
}
.serwis-onas-story__inner { position: relative; display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(36px, 5vw, 76px); align-items: center; }
.serwis-onas-story__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.serwis-onas-story__p { margin: 18px 0 0; font-size: 16.5px; line-height: 1.78; color: var(--sb-muted); }
.serwis-onas__accent-text { color: var(--sb-accent); }
.serwis-onas-story__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--sb-accent) !important;
    text-decoration: none !important;
    transition: gap .18s ease, color .18s ease;
}
.serwis-onas-story__link svg { width: 18px; height: 18px; flex: 0 0 auto; }
.serwis-onas-story__link:hover { gap: 12px; color: var(--sb-blue) !important; }

/* ── Filary — karty na siatce z magenta poświatą, akcent na hover, numeracja ── */
.serwis-onas-values {
    position: relative;
    overflow: hidden;
    padding: clamp(62px, 8vw, 112px) 0;
    background-color: #FAF8F6;
    background-image:
        radial-gradient(62% 82% at 100% -5%, rgba(138, 0, 139, 0.09), transparent 55%),
        linear-gradient(rgba(27, 25, 25, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 25, 25, 0.04) 1px, transparent 1px);
    background-size: auto, 44px 44px, 44px 44px;
    color: var(--sb-ink);
}
.serwis-onas-values::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url("assets/offer-pattern.svg") repeat;
    background-size: 300px;
    opacity: 0.6;
    z-index: 0;
    pointer-events: none;
}
.serwis-onas-values .serwis-onas__inner { position: relative; z-index: 1; }
.serwis-onas-values__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.serwis-onas-value {
    position: relative;
    overflow: hidden;
    padding: 36px 28px 30px;
    background: #fff;
    border: 1px solid rgba(27, 25, 25, 0.07);
    border-radius: 18px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03);
    transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.serwis-onas-value::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sb-accent), var(--sb-accent-light));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .28s ease;
}
.serwis-onas-value:hover { transform: translateY(-6px); box-shadow: 0 22px 46px rgba(42, 0, 42, 0.10); border-color: rgba(138, 0, 139, 0.16); }
.serwis-onas-value:hover::before { transform: scaleX(1); }
.serwis-onas-value__num {
    position: absolute;
    top: 24px;
    right: 26px;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.04em;
    color: rgba(138, 0, 139, 0.22);
}
.serwis-onas-value__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    margin-bottom: 22px;
    border-radius: 15px;
    background: linear-gradient(140deg, rgba(138, 0, 139, 0.12), rgba(201, 138, 202, 0.16));
    color: var(--sb-accent);
}
.serwis-onas-value__icon svg { width: 28px; height: 28px; }
.serwis-onas-value__title { margin: 0 0 10px; font-size: 18px; font-weight: 800; }
.serwis-onas-value__text { margin: 0; font-size: 14px; line-height: 1.62; color: var(--sb-muted); }

/* ── Proces — karty kroków z dużymi gradientowymi numerami ── */
.serwis-onas-process {
    position: relative;
    overflow: hidden;
    padding: clamp(62px, 8vw, 112px) 0;
    background-color: #fff;
    background-image:
        radial-gradient(circle at 99.5% 0.5%, transparent 146px, rgba(138, 0, 139, 0.11) 146px 148px, transparent 148px),
        radial-gradient(circle at 99.5% 0.5%, transparent 250px, rgba(138, 0, 139, 0.07) 250px 252px, transparent 252px),
        radial-gradient(circle at 0.5% 99.5%, transparent 118px, rgba(201, 138, 202, 0.13) 118px 120px, transparent 120px),
        radial-gradient(circle at 0.5% 99.5%, transparent 214px, rgba(201, 138, 202, 0.09) 214px 216px, transparent 216px);
    color: var(--sb-ink);
}
.serwis-onas-process__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.serwis-onas-step {
    position: relative;
    padding: 28px 26px 30px;
    background: #FAF8F6;
    border: 1px solid rgba(27, 25, 25, 0.06);
    border-radius: 18px;
    transition: transform .22s ease, box-shadow .22s ease;
}
.serwis-onas-step:hover { transform: translateY(-4px); box-shadow: 0 16px 38px rgba(42, 0, 42, 0.08); }
.serwis-onas-step__num {
    display: block;
    margin-bottom: 14px;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: clamp(34px, 3.4vw, 44px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: -0.02em;
    background: linear-gradient(140deg, var(--sb-accent) 25%, var(--sb-accent-light));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--sb-accent);
}
.serwis-onas-step__title { margin: 0 0 9px; font-size: 19px; font-weight: 800; }
.serwis-onas-step__text { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--sb-muted); }

/* ── CTA ── */
.serwis-onas-cta { position: relative; overflow: hidden; padding: clamp(56px, 7vw, 96px) 0; background: var(--sb-blue-900); color: #fff; }
.serwis-onas-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 160% at 100% 0%, rgba(138, 0, 139, .42), transparent 60%); }
.serwis-onas-cta__inner { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.serwis-onas-cta__title { margin: 0; max-width: 560px; font-family: 'Archivo', system-ui, sans-serif; font-size: clamp(26px, 3.2vw, 40px); font-weight: 900; line-height: 1.12; letter-spacing: -0.025em; }
.serwis-onas-cta__lead { margin: 14px 0 0; font-size: 16.5px; line-height: 1.6; color: rgba(255, 255, 255, .8); }
.serwis-onas-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; }
.serwis-onas-cta__phone { font-family: 'Archivo', system-ui, sans-serif; font-weight: 800; font-size: 18px; color: #fff !important; text-decoration: none; }
.serwis-onas-cta__phone:hover { text-decoration: underline; }

/* ── Responsywność ── */
@media (max-width: 900px) {
    .serwis-onas-story__inner { grid-template-columns: 1fr; }
    .serwis-onas-story__media { order: -1; }
    .serwis-onas-values__grid { grid-template-columns: repeat(2, 1fr); }
    .serwis-onas-process__grid { grid-template-columns: repeat(2, 1fr); gap: 38px 30px; }
}
@media (max-width: 560px) {
    .serwis-onas-values__grid,
    .serwis-onas-process__grid { grid-template-columns: 1fr; }
    .serwis-onas-cta__inner { flex-direction: column; align-items: flex-start; }
}

/* ==========================================================================
   F-034 — Strona "Kontakt": hero (jak /o-nas/) + karty kontaktu nachodzące na
   dolną krawędź hero + formularz WPForms ze wskazówkami. Paleta plum/magenta.
   ========================================================================== */

.serwis-kontakt__inner { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 44px); }
.serwis-kontakt__eyebrow {
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sb-accent);
}
/* Divider współdzielony przez obie kolumny warsztatu (DRY) — fading hairline jak .serwis-offer. */
.serwis-kontakt__divider { display: flex; align-items: center; margin: 0 0 26px; height: 3px; }
.serwis-kontakt__divider::before { content: ""; width: 56px; height: 3px; background: var(--sb-accent); border-radius: 2px; flex: 0 0 auto; }
.serwis-kontakt__divider::after { content: ""; flex: 1 1 auto; height: 1px; margin-left: 4px; background: linear-gradient(90deg, rgba(27, 25, 25, 0.20), transparent); }

/* ── Masthead — slim ciemny plum, treść do lewej, 6px accent bar (echo hero home), BEZ glow ── */
.serwis-kontakt-masthead {
    position: relative;
    overflow: hidden;
    padding: clamp(40px, 6vw, 76px) 0 clamp(44px, 6vw, 80px);
    background-color: var(--sb-blue-900);
    /* Blueprint grid (białe hairline) — DNA „rysunek techniczny"; !important bije tło alignfull Blocksy. */
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px) !important;
    background-size: 48px 48px !important;
    background-position: 0 0, 0 0 !important;
    color: #fff;
}
.serwis-kontakt-masthead__accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: var(--sb-accent);
}
.serwis-kontakt-masthead__inner { position: relative; z-index: 1; }
.serwis-kontakt-masthead__crumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
}
.serwis-kontakt-masthead__crumbs a { color: var(--sb-accent-light); text-decoration: none; transition: color .2s; }
.serwis-kontakt-masthead__crumbs a:hover { color: #fff; }
.serwis-kontakt-masthead__crumbs a:focus-visible { outline: 2px solid var(--sb-accent-light); outline-offset: 3px; border-radius: 2px; }
.serwis-kontakt-masthead__eyebrow {
    margin: 0 0 16px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--sb-accent-light);
}
.serwis-kontakt-masthead__title {
    margin: 0;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: clamp(36px, 5.2vw, 64px);
    font-weight: 900;
    line-height: 0.98;
    letter-spacing: -0.03em;
    max-width: 16ch;
}
.serwis-kontakt-masthead__accent-word { color: var(--sb-accent-light); }
.serwis-kontakt-masthead__sub {
    margin: 22px 0 0;
    max-width: 560px;
    font-size: clamp(15px, 1.5vw, 17px);
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
}

/* ── Warsztat — biały + blueprint grid: kanały + locator (lewa) | formularz (prawa) ── */
.serwis-kontakt-main {
    background-color: #fff;
    /* Blueprint grid 48px (DNA #2) — !important bije tło alignfull Blocksy (jak .serwis-about/.serwis-offer). */
    background-image:
        linear-gradient(rgba(27, 25, 25, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 25, 25, 0.05) 1px, transparent 1px) !important;
    background-size: 48px 48px !important;
    background-position: 0 0, 0 0 !important;
    padding: clamp(48px, 7vw, 96px) 0;
    color: var(--sb-ink);
}
.serwis-kontakt-main__inner {
    display: grid;
    grid-template-columns: 0.82fr 1.18fr;
    gap: clamp(28px, 4vw, 64px);
    align-items: start;
}

/* lewa kolumna — kanały kontaktu jako lista editorial (line-ikony, hairline, hover ring→fill) */
.serwis-kontakt-contact__heading {
    margin: 0 0 18px;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: clamp(24px, 2.4vw, 32px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.015em;
    color: var(--sb-ink);
}
.serwis-kontakt-channels { list-style: none; margin: 0 0 clamp(28px, 3vw, 40px); padding: 0; }
.serwis-kontakt-channel {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid rgba(27, 25, 25, 0.10);
}
.serwis-kontakt-channel:last-child { border-bottom: 1px solid rgba(27, 25, 25, 0.10); }
.serwis-kontakt-channel__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border: 1px solid rgba(27, 25, 25, 0.14);
    border-radius: 10px;
    color: var(--sb-accent);
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.serwis-kontakt-channel:hover .serwis-kontakt-channel__icon { border-color: var(--sb-accent); background: var(--sb-accent); color: #fff; }
.serwis-kontakt-channel__icon svg { width: 22px; height: 22px; }
.serwis-kontakt-channel__body { min-width: 0; display: flex; flex-direction: column; }
.serwis-kontakt-channel__label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sb-muted); }
.serwis-kontakt-channel__value {
    margin-top: 3px;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--sb-ink);
    text-decoration: none;
    transition: color .18s ease;
}
a.serwis-kontakt-channel__value:hover { color: var(--sb-accent); }
a.serwis-kontakt-channel__value:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 3px; border-radius: 4px; }
.serwis-kontakt-channel__meta { margin-top: 5px; font-size: 13px; color: var(--sb-muted); }

/* locator — schematyczny „site plan" na blueprint grid (bez zewnętrznego iframe) */
.serwis-kontakt-locator { border: 1px solid rgba(27, 25, 25, 0.10); border-radius: 14px; overflow: hidden; background: #fff; }
.serwis-kontakt-locator__canvas {
    position: relative;
    aspect-ratio: 16 / 10;
    background-color: #fff;
    background-image:
        linear-gradient(rgba(27, 25, 25, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 25, 25, 0.07) 1px, transparent 1px);
    background-size: 28px 28px;
    border-bottom: 1px solid rgba(27, 25, 25, 0.10);
}
/* krzyż celownika przez marker — wzór „rysunek techniczny" (akcent-tint, nie kolor-gradient) */
.serwis-kontakt-locator__canvas::before,
.serwis-kontakt-locator__canvas::after { content: ""; position: absolute; background: rgba(138, 0, 139, 0.16); }
.serwis-kontakt-locator__canvas::before { left: 0; right: 0; top: 50%; height: 1px; }
.serwis-kontakt-locator__canvas::after { top: 0; bottom: 0; left: 50%; width: 1px; }
.serwis-kontakt-locator__marker {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: var(--sb-accent);
    box-shadow: 0 0 0 6px rgba(138, 0, 139, 0.14), inset 0 0 0 1px #fff;
}
.serwis-kontakt-locator__marker::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 58px;
    height: 58px;
    transform: translate(-50%, -50%);
    border: 1px solid rgba(138, 0, 139, 0.30);
    border-radius: 50%;
}
.serwis-kontakt-locator__tag {
    position: absolute;
    left: calc(50% + 16px);
    top: calc(50% - 34px);
    padding: 3px 9px;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--sb-accent);
    background: #fff;
    border: 1px solid rgba(27, 25, 25, 0.12);
    border-radius: 4px;
}
.serwis-kontakt-locator__info { padding: 18px 20px 20px; }
.serwis-kontakt-locator__label { font-size: 12px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sb-muted); }
.serwis-kontakt-locator__addr { margin: 8px 0 14px; font-family: 'Archivo', system-ui, sans-serif; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--sb-ink); }
.serwis-kontakt-locator__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--sb-accent);
    text-decoration: none;
}
.serwis-kontakt-locator__cta svg { width: 16px; height: 16px; transition: transform .2s ease; }
.serwis-kontakt-locator__cta:hover { color: var(--sb-blue); }
.serwis-kontakt-locator__cta:hover svg { transform: translateX(3px); }
.serwis-kontakt-locator__cta:focus-visible { outline: 2px solid var(--sb-accent); outline-offset: 3px; border-radius: 4px; }

/* ── Formularz — biała karta (signature brand-tinted depth), prawa kolumna warsztatu ── */
.serwis-kontakt-form {
    background: #fff;
    border: 1px solid rgba(27, 25, 25, 0.08);
    border-radius: 16px;
    padding: clamp(26px, 3.4vw, 50px);
    box-shadow: 0 26px 60px -34px rgba(42, 0, 42, 0.30);
}
.serwis-kontakt-form__heading { margin: 0 0 18px; font-family: 'Archivo', system-ui, sans-serif; font-size: clamp(26px, 3vw, 36px); font-weight: 800; line-height: 1.12; letter-spacing: -0.02em; color: var(--sb-ink); }
.serwis-kontakt-form__lead { margin: 0 0 28px; max-width: 520px; font-size: 16px; line-height: 1.66; color: var(--sb-muted); }
.serwis-kontakt-form__fallback {
    display: inline-flex;
    align-items: center;
    padding: 15px 28px;
    border-radius: 8px;
    background: var(--sb-accent);
    color: #fff !important;
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    text-decoration: none;
}

/* WPForms — scoped do strony kontaktu, paleta plum/magenta */
.serwis-kontakt-form__fields .wpforms-container { margin: 0; }
.serwis-kontakt-form__fields .wpforms-field { padding: 0 0 16px; }
/* 2-kolumnowy układ pól (krótszy, gęstszy formularz). Pola: name|email, telefon|temat, textarea full. */
@media (min-width: 600px) {
    .serwis-kontakt-form__fields .wpforms-field-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 18px;
    }
    .serwis-kontakt-form__fields .wpforms-field-textarea,
    .serwis-kontakt-form__fields .wpforms-field-hp { grid-column: 1 / -1; }
}
.serwis-kontakt-form__fields .wpforms-field-label {
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--sb-ink);
    margin-bottom: 7px;
}
.serwis-kontakt-form__fields .wpforms-required-label { color: var(--sb-accent); }
.serwis-kontakt-form__fields input[type="text"],
.serwis-kontakt-form__fields input[type="email"],
.serwis-kontakt-form__fields input[type="tel"],
.serwis-kontakt-form__fields textarea {
    width: 100%;
    padding: 13px 16px;
    font-size: 15px;
    color: var(--sb-ink);
    background: #fff;
    border: 1.5px solid rgba(27, 25, 25, 0.16);
    border-radius: 8px;
    transition: border-color .18s ease, box-shadow .18s ease;
    box-sizing: border-box;
}
.serwis-kontakt-form__fields textarea { min-height: 140px; resize: vertical; }
.serwis-kontakt-form__fields input:focus,
.serwis-kontakt-form__fields textarea:focus {
    outline: none;
    border-color: var(--sb-accent);
    box-shadow: 0 0 0 3px rgba(138, 0, 139, 0.12);
}
.serwis-kontakt-form__fields input::placeholder,
.serwis-kontakt-form__fields textarea::placeholder { color: rgba(27, 25, 25, 0.4); }
.serwis-kontakt-form__fields .wpforms-field-description { font-size: 13px; color: var(--sb-muted); }
.serwis-kontakt-form__fields .wpforms-error {
    font-size: 13px;
    color: #b00043;
    margin-top: 6px;
}
.serwis-kontakt-form__fields input.wpforms-error,
.serwis-kontakt-form__fields textarea.wpforms-error { border-color: #b00043; }
.serwis-kontakt-form__fields .wpforms-submit-container { margin-top: 4px; }
.serwis-kontakt-form__fields button.wpforms-submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 15px 32px;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    background: var(--sb-accent);
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.serwis-kontakt-form__fields button.wpforms-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(138, 0, 139, 0.34);
    background: var(--sb-blue);
}
.serwis-kontakt-form__fields button.wpforms-submit:focus-visible {
    outline: 2px solid var(--sb-accent);
    outline-offset: 3px;
}
.serwis-kontakt-form__fields .wpforms-confirmation-container-full {
    padding: 22px 24px;
    background: var(--sb-surface);
    border: 1px solid var(--sb-border);
    border-radius: 14px;
    color: var(--sb-ink);
}

/* ── Pasek danych rejestrowych — cichy „colophon" (NIP/REGON/KRS z opcji serwis_kontakt_*) ── */
.serwis-kontakt-legal {
    background-color: #fff;
    border-top: 1px solid rgba(27, 25, 25, 0.10);
    padding: clamp(22px, 3vw, 32px) 0;
}
.serwis-kontakt-legal__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px clamp(20px, 3vw, 40px);
}
.serwis-kontakt-legal__brand {
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--sb-ink);
}
.serwis-kontakt-legal__data { display: flex; flex-wrap: wrap; gap: 8px clamp(16px, 2.4vw, 30px); margin: 0; }
.serwis-kontakt-legal__data > div { display: flex; align-items: baseline; gap: 8px; }
.serwis-kontakt-legal__data dt { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sb-muted); }
.serwis-kontakt-legal__data dd { margin: 0; font-size: 14px; color: var(--sb-ink); font-variant-numeric: tabular-nums; }

/* ── Responsywność ── */
@media (max-width: 900px) {
    .serwis-kontakt-main__inner { grid-template-columns: 1fr; gap: 40px; }
    .serwis-kontakt-contact { max-width: 600px; }
}
@media (max-width: 600px) {
    .serwis-kontakt-masthead__crumbs a { padding: 6px 0; }
    /* Touch target ≥44px dla klikalnych danych kontaktu. */
    .serwis-kontakt-channel__value { display: inline-flex; align-items: center; min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .serwis-kontakt-channel__icon,
    .serwis-kontakt-channel__value,
    .serwis-kontakt-locator__cta svg { transition: none; }
    .serwis-kontakt-locator__cta:hover svg { transform: none; }
}

/* ==========================================================================
   F-032 — Cart UX: add-to-cart toast + cart-icon bump (no page reload).
   ========================================================================== */

/* Hide WooCommerce's appended "View cart" link — the toast confirms the add */
a.added_to_cart { display: none !important; }

/* Toast — small elegant confirmation near the cart icon */
.serwis-cart-toast {
    position: fixed;
    top: clamp(76px, 10vw, 140px);
    right: clamp(14px, 3vw, 28px);
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: calc(100vw - 28px);
    padding: 12px 18px;
    border-radius: 12px;
    background: var(--sb-blue-900);
    color: #fff;
    font-family: 'Archivo', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 14px 38px rgba(26, 0, 26, 0.28);
    opacity: 0;
    transform: translateY(-10px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.28s ease, transform 0.28s ease;
}
.serwis-cart-toast.is-visible { opacity: 1; transform: translateY(0) scale(1); }
.serwis-cart-toast svg { flex: 0 0 auto; color: var(--sb-accent-light); }

/* Cart icon bump on add */
.sh-action--cart { transition: transform 0.2s ease; }
.sh-action--cart.is-bumped { animation: serwis-cart-bump 0.5s ease; }
@keyframes serwis-cart-bump {
    0%, 100% { transform: scale(1); }
    30% { transform: scale(1.22); }
    60% { transform: scale(0.96); }
}

/* Add-to-cart button micro-states (home CTA + single product) */
.serwis-products__cta.is-loading,
.single_add_to_cart_button.is-loading { opacity: 0.65; pointer-events: none; }
.serwis-products__cta.is-added { color: var(--sb-accent) !important; }

@media (prefers-reduced-motion: reduce) {
    .serwis-cart-toast { transition: opacity 0.2s ease; transform: none; }
    .serwis-cart-toast.is-visible { transform: none; }
    .sh-action--cart.is-bumped { animation: none; }
}

/* ==========================================================================
   Footer (.serwis-footer) — light cream footer with editorial CTA section
   Strong contrast to dark blog above. Top CTA = conversion anchor for users
   who scrolled to bottom. Magenta accents tie back to brand identity.
   ========================================================================== */
.serwis-footer {
    position: relative;
    background: #F5F1ED;
    color: var(--sb-ink);
    font-size: 14.5px;
    line-height: 1.6;
    isolation: isolate;
}
/* Thin magenta strip at top — graceful transition from dark blog to light footer. */
.serwis-footer__accent {
    height: 4px;
    background: linear-gradient(90deg, var(--sb-accent) 0%, var(--sb-accent-light) 40%, var(--sb-accent) 100%);
}
.serwis-footer__inner {
    max-width: 1320px;
    margin: 0 auto;
    padding: 0 32px;
}

/* ---------- Top CTA — editorial hero block above links ---------- */
.serwis-footer__cta {
    position: relative;
    padding: 64px 0 56px;
    overflow: hidden;
}
.serwis-footer__cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(27, 25, 25, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(27, 25, 25, 0.045) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
    z-index: 0;
}
.serwis-footer__inner--cta {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
}
.serwis-footer__cta-text { max-width: none; }
.serwis-footer__cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sb-accent);
}
.serwis-footer__cta-eyebrow::before {
    content: "";
    width: 28px;
    height: 2px;
    background: currentColor;
    flex: 0 0 28px;
}
.serwis-footer__cta-heading {
    margin: 0 0 22px;
    font-size: clamp(28px, 2.8vw, 40px);
    line-height: 1.1;
    font-weight: 800;
    letter-spacing: -0.018em;
    color: var(--sb-ink);
    text-wrap: balance;
}
.serwis-footer__cta-lead {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--sb-muted);
    max-width: 480px;
}

/* Flowing arrow SVG — spans both grid columns behind content */
.serwis-footer__cta-flow {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.serwis-footer__cta-text,
.serwis-footer__cta-action {
    position: relative;
    z-index: 1;
}
.serwis-footer__cta-path {
    transition: filter .5s ease, stroke-opacity .5s ease;
}
.serwis-footer__cta:hover .serwis-footer__cta-path--1 {
    stroke-opacity: 0.55;
    animation: glowMagenta 2.2s ease-in-out infinite;
}
.serwis-footer__cta:hover .serwis-footer__cta-path--2 {
    stroke-opacity: 0.45;
    animation: glowTerra 2.2s ease-in-out 0.35s infinite;
}
.serwis-footer__cta:hover .serwis-footer__cta-path--3 {
    stroke-opacity: 0.32;
    animation: glowPurple 2.2s ease-in-out 0.7s infinite;
}
@keyframes glowMagenta {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(138, 0, 139, 0.2)); }
    50%      { filter: drop-shadow(0 0 18px rgba(138, 0, 139, 0.5)); }
}
@keyframes glowTerra {
    0%, 100% { filter: drop-shadow(0 0 5px rgba(196, 107, 80, 0.15)); }
    50%      { filter: drop-shadow(0 0 16px rgba(196, 107, 80, 0.45)); }
}
@keyframes glowPurple {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(139, 127, 199, 0.15)); }
    50%      { filter: drop-shadow(0 0 20px rgba(139, 127, 199, 0.4)); }
}

/* Right col — button only */
.serwis-footer__cta-action {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* CTA button — matches site design system (hero/about CTA scale) */
.serwis-footer__cta-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 32px;
    border: none;
    border-radius: 8px;
    background: var(--sb-accent);
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 14px -4px rgba(138, 0, 139, 0.35);
    transition: background .2s, transform .18s, box-shadow .2s;
    z-index: 1;
}
.serwis-footer__cta-btn:hover {
    background: var(--sb-blue);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px -6px rgba(138, 0, 139, 0.45);
}
.serwis-footer__cta-btn span {
    display: inline-block;
    transition: transform .2s;
}
.serwis-footer__cta-btn:hover span { transform: translateX(3px); }
.serwis-footer__cta-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px -4px rgba(138, 0, 139, 0.3);
}

/* ---------- 4-col link section ---------- */
.serwis-footer__top {
    padding: 24px 0 72px;
    border-top: 1px solid rgba(27, 25, 25, 0.08);
}
.serwis-footer__top .serwis-footer__inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.45fr;
    gap: 56px;
    align-items: start;
    padding-top: 56px;
}

/* ---------- Column: Brand ---------- */
.serwis-footer__col--brand {
    max-width: 380px;
}
.serwis-footer__logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 22px;
    text-decoration: none !important;
}
.serwis-footer__logo-bar {
    width: 5px;
    height: 36px;
    background: var(--sb-accent);
    border-radius: 2px;
    flex: 0 0 5px;
}
.serwis-footer__logo-text {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 900;
    font-size: 32px;
    color: var(--sb-blue-900);
    letter-spacing: 0.04em;
    line-height: 1;
}
.serwis-footer__logo-dot {
    font-family: 'Archivo', system-ui, sans-serif;
    font-weight: 700;
    font-size: 15px;
    color: var(--sb-accent);
    letter-spacing: 0.03em;
    align-self: flex-end;
    margin-bottom: 3px;
    margin-left: -6px;
}
.serwis-footer__tagline {
    margin: 0;
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--sb-muted);
}

/* ---------- Heading + lists ---------- */
.serwis-footer__heading {
    margin: 0 0 22px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--sb-accent);
    position: relative;
    padding-bottom: 14px;
}
.serwis-footer__heading::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 28px;
    height: 2px;
    background: var(--sb-accent);
    border-radius: 2px;
}
.serwis-footer__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.serwis-footer__list li { margin: 0; padding: 0; }
.serwis-footer__list li::before,
.serwis-footer__list li::marker { content: none; display: none; }
.serwis-footer__list a {
    color: var(--sb-ink) !important;
    text-decoration: none !important;
    font-size: 14.5px;
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.18s ease, gap 0.18s ease;
}
.serwis-footer__list a::before {
    content: "";
    width: 0;
    height: 1px;
    background: var(--sb-accent);
    transition: width 0.22s ease;
    flex: 0 0 auto;
}
.serwis-footer__list a:hover {
    color: var(--sb-accent) !important;
    gap: 10px;
}
.serwis-footer__list a:hover::before { width: 8px; }
.serwis-footer__list-cta-item { margin-top: 6px; }
.serwis-footer__list-cta {
    color: var(--sb-accent) !important;
    font-weight: 700 !important;
}
.serwis-footer__list-cta::before { display: none !important; }
.serwis-footer__list-cta span {
    transition: transform 0.22s ease;
    display: inline-block;
}
.serwis-footer__list-cta:hover span { transform: translateX(3px); }

/* ---------- Column: Contact ---------- */
.serwis-footer__contact {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.serwis-footer__contact li::before,
.serwis-footer__contact li::marker { content: none; display: none; }
.serwis-footer__contact-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}
.serwis-footer__contact-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(27, 25, 25, 0.05);
    color: var(--sb-accent);
    transition: background 0.2s ease, color 0.2s ease;
}
.serwis-footer__contact-icon svg { width: 17px; height: 17px; }
.serwis-footer__contact-item:hover .serwis-footer__contact-icon {
    background: var(--sb-accent);
    color: #fff;
}
.serwis-footer__contact-label {
    display: block;
    margin-bottom: 3px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sb-muted);
}
.serwis-footer__contact-link,
.serwis-footer__contact-value {
    color: var(--sb-ink);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.4;
}
.serwis-footer__contact-link {
    text-decoration: none !important;
    transition: color 0.18s ease;
}
.serwis-footer__contact-link:hover { color: var(--sb-accent) !important; }
.serwis-footer__contact-value {
    color: var(--sb-muted);
    font-weight: 500;
}

/* ---------- Bottom legal bar ---------- */
.serwis-footer__bottom {
    border-top: 1px solid rgba(27, 25, 25, 0.08);
    padding: 22px 0;
    background: #EDE5E0;
}
.serwis-footer__inner--bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.serwis-footer__copyright {
    margin: 0;
    font-size: 13px;
    color: var(--sb-muted);
}
.serwis-footer__copyright strong {
    color: var(--sb-ink);
    font-weight: 700;
}
.serwis-footer__legal {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}
.serwis-footer__legal li::before,
.serwis-footer__legal li::marker { content: none; display: none; }
.serwis-footer__legal a {
    color: var(--sb-muted) !important;
    text-decoration: none !important;
    font-size: 13px;
    transition: color 0.18s ease;
}
.serwis-footer__legal a:hover { color: var(--sb-accent) !important; }

@media (max-width: 1023px) {
    .serwis-footer__cta { padding: 64px 0 56px; }
    .serwis-footer__inner--cta {
        grid-template-columns: 1fr;
        gap: 36px;
    }
    .serwis-footer__cta-flow { display: none; }
    .serwis-footer__top .serwis-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 40px 32px;
    }
    .serwis-footer__col--brand,
    .serwis-footer__col--contact { grid-column: 1 / -1; }
    .serwis-footer__col--brand { max-width: 100%; }
}

@media (max-width: 600px) {
    .serwis-footer { font-size: 14px; }

    /* CTA — tight, conversion-focused, no wasted air */
    .serwis-footer__cta { padding: 28px 0 22px; }
    .serwis-footer__cta::before { background-size: 32px 32px; }
    .serwis-footer__inner { padding: 0 20px; }
    .serwis-footer__inner--cta { gap: 20px; }
    .serwis-footer__cta-eyebrow {
        font-size: 11px;
        margin-bottom: 10px;
        letter-spacing: 0.16em;
    }
    .serwis-footer__cta-heading {
        font-size: clamp(23px, 6.3vw, 29px);
        margin-bottom: 10px;
        line-height: 1.12;
        letter-spacing: -0.022em;
    }
    .serwis-footer__cta-lead {
        font-size: 14px;
        line-height: 1.5;
    }

    /* Button — full-width on mobile */
    .serwis-footer__cta-btn {
        padding: 14px 24px;
        font-size: 14.5px;
        width: 100%;
    }

    /* Layout: Brand full → Sklep full (2-col internal) → Firma|Kontakt 2-col */
    .serwis-footer__top { padding: 0 0 28px; }
    .serwis-footer__top .serwis-footer__inner {
        grid-template-columns: 1fr 1fr;
        gap: 26px 22px;
        padding-top: 28px;
    }
    .serwis-footer__col--brand,
    .serwis-footer__col--shop { grid-column: 1 / -1; }
    .serwis-footer__col--contact { grid-column: auto; }
    .serwis-footer__col--brand { max-width: 100%; }

    /* Sklep — internal 2-col grid for compact, balanced list */
    .serwis-footer__col--shop .serwis-footer__list {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 16px;
        row-gap: 8px;
    }
    .serwis-footer__col--shop .serwis-footer__list-cta-item {
        grid-column: 1 / -1;
        margin-top: 4px;
    }

    /* Logo + tagline — compact, proportional */
    .serwis-footer__logo { gap: 8px; margin-bottom: 12px; }
    .serwis-footer__logo-bar { height: 28px; width: 4px; flex-basis: 4px; }
    .serwis-footer__logo-text { font-size: 24px; }
    .serwis-footer__logo-dot { font-size: 12px; margin-bottom: 2px; }
    .serwis-footer__tagline { font-size: 13.5px; line-height: 1.5; }

    /* Subtler heading rhythm */
    .serwis-footer__heading {
        font-size: 11px;
        letter-spacing: 0.16em;
        margin-bottom: 12px;
        padding-bottom: 8px;
    }
    .serwis-footer__heading::after { width: 18px; }

    /* Nav lists — better touch */
    .serwis-footer__list { gap: 8px; }
    .serwis-footer__list a { font-size: 14px; padding: 2px 0; }

    /* Kontakt — dedupe phone/email (already in CTA card above);
       narrow 2nd col means we drop the decorative icon and rely on label */
    .serwis-footer__col--contact .serwis-footer__contact-item:nth-child(1),
    .serwis-footer__col--contact .serwis-footer__contact-item:nth-child(2) {
        display: none;
    }
    .serwis-footer__contact { gap: 14px; }
    .serwis-footer__contact-item { gap: 0; padding-left: 0; }
    .serwis-footer__contact-icon { display: none; }
    .serwis-footer__contact-label { font-size: 10px; letter-spacing: 0.12em; }
    .serwis-footer__contact-value { font-size: 13.5px; line-height: 1.45; }

    /* Bottom bar — drop verbose tagline */
    .serwis-footer__bottom { padding: 14px 0; }
    .serwis-footer__inner--bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    .serwis-footer__copyright { font-size: 12px; }
    .serwis-footer__copyright-tag { display: none; }
    .serwis-footer__legal { gap: 4px 14px; font-size: 12px; }
}

/* ==========================================================================
   Cart / Checkout / Account — conversion-focused pages.
   1. Main fills viewport — footer below the fold; cart "owns" first screen.
      svh = small viewport height, excludes mobile browser chrome.
   2. Trim footer CTA (hide hero text, keep compact contact card centered) —
      "Potrzebujesz wyceny" competes with the primary checkout action.
   3. Style WooCommerce "Proceed to Checkout" as a real primary button (brand
      magenta), default Woo gray button reads as disabled.
   ========================================================================== */
body.woocommerce-checkout main.site-main,
body.woocommerce-account main.site-main {
    min-height: 100vh;
    min-height: 100svh;
}
/* Cart/Checkout/Account footer keeps full layout — the cart recommendations
   slider already extends the page, so footer doesn't dominate anymore.
   Just trim the top/bottom padding slightly to keep proportions sensible. */
body.woocommerce-cart .serwis-footer__cta,
body.woocommerce-checkout .serwis-footer__cta,
body.woocommerce-account .serwis-footer__cta {
    padding: 64px 0 48px;
}
@media (max-width: 600px) {
    body.woocommerce-cart .serwis-footer__cta,
    body.woocommerce-checkout .serwis-footer__cta,
    body.woocommerce-account .serwis-footer__cta {
        padding: 32px 0 24px;
    }
}

/* Primary checkout button — magenta brand, prominent */
.wp-block-button.wc-proceed-to-checkout .wp-block-button__link,
.wp-block-woocommerce-proceed-to-checkout-block .wp-block-button__link,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
    background: var(--sb-accent) !important;
    color: #fff !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 14px 24px !important;
    border-radius: 10px !important;
    border: none !important;
    box-shadow: 0 4px 12px -4px rgba(138, 0, 139, 0.35) !important;
    transition: background 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease !important;
}
.wp-block-button.wc-proceed-to-checkout .wp-block-button__link:hover,
.wp-block-woocommerce-proceed-to-checkout-block .wp-block-button__link:hover,
.wc-block-cart__submit-button:hover,
.wc-block-components-checkout-place-order-button:hover {
    background: var(--sb-blue) !important;
    transform: translateY(-1px);
    box-shadow: 0 14px 32px -8px rgba(138, 0, 139, 0.55) !important;
}

/* ==========================================================================
   CUSTOM CART — .serwis-cart
   Replaces WooCommerce Blocks entirely. Own HTML, own rules.
   8px grid · type scale: 12 / 14 / 16 / 20 / 24
   ========================================================================== */

/* Kill WooCommerce Blocks cart + default page header — our PHP replaces it */
body.woocommerce-cart .wp-block-woocommerce-cart,
body.woocommerce-cart .entry-header { display: none !important; }
body.woocommerce-cart .entry-content { padding-top: 0 !important; }
body.woocommerce-cart .ct-container-full { padding: 20px 0 0 !important; gap: 0 !important; }
body.woocommerce-cart .ct-container-full > * { margin-top: 0 !important; }

/* Fix sticky: Blocksy sets overflow:hidden on ancestors — break it */
body.woocommerce-cart .site-main,
body.woocommerce-cart .entry-content,
body.woocommerce-cart .site-main > *,
body.woocommerce-cart article { overflow: visible !important; }

/* --- Layout -------------------------------------------------------------- */
.serwis-cart { max-width: 1080px; margin: 0 auto; }
.serwis-cart__layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 40px;
    align-items: start;
}

/* --- Heading ------------------------------------------------------------- */
.serwis-cart__heading {
    font-size: 24px; font-weight: 700; color: var(--sb-ink);
    margin: 0 0 24px; letter-spacing: -0.01em; line-height: 1.3;
}
.serwis-cart__count {
    font-size: 14px; font-weight: 400; color: var(--sb-muted); margin-left: 8px;
}

/* --- Item list ----------------------------------------------------------- */
.serwis-cart__items { display: flex; flex-direction: column; }
.serwis-cart__item {
    display: grid;
    grid-template-columns: 80px 1fr 120px 100px 32px;
    gap: 0 16px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(27,25,25,.08);
}
.serwis-cart__item:first-child { border-top: 1px solid rgba(27,25,25,.08); }

/* Thumbnail */
.serwis-cart__item-img { width: 80px; height: 80px; flex-shrink: 0; }
.serwis-cart__item-img a { display: block; border-radius: 10px; overflow: hidden; }
.serwis-cart__thumb,
.serwis-cart__item-img img {
    width: 80px !important; height: 80px !important;
    object-fit: cover; border-radius: 10px;
    background: #f5f5f5;
}

/* Info */
.serwis-cart__item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.serwis-cart__item-name {
    font-size: 15px; font-weight: 600; color: var(--sb-ink);
    text-decoration: none; line-height: 1.35;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.serwis-cart__item-name:hover { color: var(--sb-accent); }
.serwis-cart__item-unit { font-size: 13px; color: var(--sb-muted); }

/* Atrybuty wariantu w pozycji koszyka (F-042). Woo zwraca <dl class="variation">
   z parami dt/dd — spłaszczamy do jednej linii „Długość: 150 cm · Montaż: …". */
.serwis-cart__item-meta { margin: 2px 0 4px; }
.serwis-cart__item-meta .variation {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 10px;
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--sb-muted);
}
/* Woo drukuje dwukropek w treści <dt>, więc żadnego ::after — inaczej „Długość::". */
.serwis-cart__item-meta .variation dt {
    font-weight: 600;
    margin: 0;
}
.serwis-cart__item-meta .variation dd {
    margin: 0 6px 0 0;
}
.serwis-cart__item-meta .variation dd p { margin: 0; }

/* Qty selector */
.serwis-cart__item-qty {
    display: inline-flex; align-items: center;
    border: 1px solid rgba(27,25,25,.10); border-radius: 8px; overflow: hidden;
}
.serwis-cart__qty-btn {
    width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    background: none; border: 0; cursor: pointer; font-size: 16px; color: var(--sb-ink);
    transition: background .15s;
}
.serwis-cart__qty-btn:hover { background: rgba(27,25,25,.04); }
.serwis-cart__qty-input {
    width: 40px; height: 36px; text-align: center;
    font-size: 14px; font-weight: 600; font-family: inherit;
    border: 0; border-inline: 1px solid rgba(27,25,25,.06); outline: none;
    -moz-appearance: textfield; appearance: textfield;
}
.serwis-cart__qty-input::-webkit-inner-spin-button,
.serwis-cart__qty-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* Line total */
.serwis-cart__item-total {
    font-size: 16px; font-weight: 700; color: var(--sb-ink);
    white-space: nowrap; text-align: right; min-width: 100px;
}

/* Remove */
.serwis-cart__item-rm {
    display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; color: rgba(27,25,25,.3); border-radius: 6px;
    transition: color .15s, background .15s; text-decoration: none;
}
.serwis-cart__item-rm:hover { color: #c41e3a; background: rgba(196,30,58,.06); }
.serwis-cart__item-rm svg { width: 18px; height: 18px; }

/* Update + continue */
.serwis-cart__update-btn {
    display: none; margin-top: 16px; padding: 10px 20px;
    font-size: 14px; font-weight: 600; font-family: inherit;
    border: 1px solid var(--sb-border); border-radius: 8px;
    background: #fff; color: var(--sb-ink); cursor: pointer;
}
.serwis-cart__form--dirty .serwis-cart__update-btn { display: inline-block; }
.serwis-cart__continue {
    display: inline-block; margin-top: 16px;
    font-size: 14px; color: var(--sb-muted); text-decoration: none;
}
.serwis-cart__continue:hover { color: var(--sb-accent); }

/* --- Sidebar / Summary --------------------------------------------------- */
.serwis-cart__summary {
    background: #fff; border: 1px solid rgba(27,25,25,.08);
    border-radius: 12px; padding: 24px;
    position: sticky; top: 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.serwis-cart__summary-h {
    font-size: 15px; font-weight: 700; color: var(--sb-ink);
    margin: 0 0 16px; padding-bottom: 16px;
    border-bottom: 1px solid rgba(27,25,25,.06);
}
.serwis-cart__summary-rows {
    display: flex; flex-direction: column; gap: 8px;
    padding-bottom: 12px;
}
.serwis-cart__srow {
    display: flex; justify-content: space-between;
    font-size: 14px; color: var(--sb-muted);
}
.serwis-cart__srow span:last-child { color: var(--sb-ink); }
.serwis-cart__total-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 12px 0 16px;
    border-top: 1px solid rgba(27,25,25,.06);
}
.serwis-cart__total-label { font-size: 14px; font-weight: 600; color: var(--sb-ink); }
.serwis-cart__total-price { font-size: 22px; font-weight: 800; color: var(--sb-ink); letter-spacing: -.02em; }
.serwis-cart__cta {
    display: block; width: 100%; padding: 14px; text-align: center;
    background: var(--sb-accent); color: #fff !important; font-size: 15px; font-weight: 700;
    border-radius: 10px; text-decoration: none; border: none;
    box-shadow: 0 4px 14px -4px rgba(138,0,139,.35);
    transition: background .2s, transform .15s, box-shadow .2s;
}
.serwis-cart__cta:hover {
    background: var(--sb-blue); transform: translateY(-1px);
    box-shadow: 0 8px 24px -6px rgba(138,0,139,.45);
}
.serwis-cart__trust {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    margin: 12px 0 0; font-size: 12px; color: var(--sb-muted);
}
.serwis-cart__trust svg { color: var(--sb-accent); flex-shrink: 0; }

/* --- Benefits bar below cart --------------------------------------------- */
.serwis-cart__benefits {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
    margin: 32px 0 48px; padding-top: 24px;
    border-top: 1px solid rgba(27,25,25,.06);
}
.serwis-cart__benefit {
    display: flex; gap: 12px; align-items: flex-start;
}
.serwis-cart__benefit svg {
    flex-shrink: 0; margin-top: 2px; color: var(--sb-accent);
}
.serwis-cart__benefit strong {
    display: block; font-size: 14px; font-weight: 700; color: var(--sb-ink); line-height: 1.3;
}
.serwis-cart__benefit span {
    display: block; font-size: 13px; color: var(--sb-muted); line-height: 1.4; margin-top: 2px;
}

/* --- Product recommendations --------------------------------------------- */
.serwis-cart__recs {
    max-width: 1080px; margin: 0 auto 40px;
    padding-top: 32px; border-top: 1px solid rgba(27,25,25,.06);
}
.serwis-cart__recs-h {
    font-size: 18px; font-weight: 700; color: var(--sb-ink); margin: 0 0 16px;
}
.serwis-cart__recs-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
.serwis-cart__rec {
    display: flex; flex-direction: column; text-decoration: none;
    border-radius: 10px; overflow: hidden;
    border: 1px solid rgba(27,25,25,.06);
    transition: box-shadow .2s, border-color .2s;
}
.serwis-cart__rec:hover {
    box-shadow: 0 6px 16px -6px rgba(0,0,0,.12);
    border-color: rgba(138,0,139,.2);
}
.serwis-cart__rec-img { aspect-ratio: 1/1; overflow: hidden; background: #f5f5f5; }
.serwis-cart__rec-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block; }
.serwis-cart__rec-name {
    padding: 10px 12px 2px; font-size: 13px; font-weight: 600; color: var(--sb-ink);
    line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.serwis-cart__rec-price {
    padding: 2px 12px 10px; font-size: 13px; font-weight: 600; color: var(--sb-accent);
}
.serwis-cart__rec-price del { color: var(--sb-muted); font-weight: 400; margin-right: 4px; }
.serwis-cart__rec-price ins { text-decoration: none; }

/* --- FAQ — animated accordion, one-at-a-time ----------------------------- */
.serwis-cart__faq {
    max-width: 1080px; margin: 0 auto 48px;
    padding-top: 32px; border-top: 1px solid rgba(27,25,25,.06);
}
.serwis-cart__faq-h {
    font-size: 18px; font-weight: 700; color: var(--sb-ink); margin: 0 0 8px;
}
.serwis-cart__faq-item {
    border-bottom: 1px solid rgba(27,25,25,.06);
}
.serwis-cart__faq-item:first-child { border-top: 1px solid rgba(27,25,25,.06); }
.serwis-cart__faq-q {
    width: 100%; display: flex; align-items: center; gap: 12px;
    padding: 14px 0; margin: 0; background: none; border: 0; cursor: pointer;
    font-family: inherit; font-size: 14px; font-weight: 600; color: var(--sb-ink);
    text-align: left; transition: color .15s;
}
.serwis-cart__faq-q:hover { color: var(--sb-accent); }
.serwis-cart__faq-icon {
    flex: 0 0 20px; width: 20px; height: 20px; color: var(--sb-accent);
    display: flex; align-items: center; justify-content: center;
}
.serwis-cart__faq-icon svg { width: 100%; height: 100%; }
.serwis-cart__faq-txt { flex: 1 1 auto; }
.serwis-cart__faq-chev {
    width: 16px; height: 16px; flex: 0 0 16px; color: var(--sb-muted);
    transition: transform .3s cubic-bezier(.22,1,.36,1), color .15s;
}
.serwis-cart__faq-q[aria-expanded="true"] .serwis-cart__faq-chev {
    transform: rotate(180deg); color: var(--sb-accent);
}
.serwis-cart__faq-body {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows .35s cubic-bezier(.22,1,.36,1);
}
.serwis-cart__faq-q[aria-expanded="true"] + .serwis-cart__faq-body {
    grid-template-rows: 1fr;
}
.serwis-cart__faq-inner { overflow: hidden; }
.serwis-cart__faq-a {
    padding: 0 0 14px 32px; margin: 0;
    font-size: 13px; line-height: 1.6; color: var(--sb-muted);
}

@media (max-width: 1100px) {
    .serwis-cart__recs, .serwis-cart__faq { margin-left: 20px; margin-right: 20px; }
    .serwis-cart__recs-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 599px) {
    .serwis-cart__recs-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .serwis-cart__recs-h, .serwis-cart__faq-h { font-size: 16px; }
}

/* --- Empty cart ---------------------------------------------------------- */
.serwis-cart--empty { text-align: center; padding: 80px 20px; }
.serwis-cart--empty-icon { color: var(--sb-border); margin-bottom: 16px; }
.serwis-cart--empty h2 { font-size: 20px; font-weight: 700; margin: 0 0 8px; }
.serwis-cart--empty p { font-size: 14px; color: var(--sb-muted); margin: 0 0 24px; }
.serwis-cart__back-btn {
    display: inline-block; padding: 12px 28px;
    background: var(--sb-accent); color: #fff; font-size: 15px; font-weight: 600;
    border-radius: 10px; text-decoration: none;
}
.serwis-cart__back-btn:hover { background: var(--sb-blue); color: #fff; }

/* --- Responsive: tablet (stack earlier — 2col too cramped below 1100) ---- */
@media (max-width: 1100px) {
    .serwis-cart__layout { grid-template-columns: 1fr; gap: 32px; }
    .serwis-cart__summary { position: static; max-width: 480px; }
    .serwis-cart__benefits { grid-template-columns: repeat(3, 1fr); }
}

/* --- Responsive: mobile ------------------------------------------------- */
@media (max-width: 599px) {
    .serwis-cart__heading { font-size: 22px; }
    .serwis-cart__item {
        grid-template-columns: 64px 1fr auto;
        grid-template-rows: auto auto;
        gap: 6px 12px;
    }
    .serwis-cart__item-img { grid-row: 1 / 3; }
    .serwis-cart__thumb,
    .serwis-cart__item-img img { width: 64px !important; height: 64px !important; }
    .serwis-cart__item-info { grid-column: 2; }
    .serwis-cart__item-name {
        white-space: normal; display: -webkit-box;
        -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    }
    .serwis-cart__item-total { grid-column: 3; grid-row: 1; }
    .serwis-cart__item-qty { grid-column: 2; grid-row: 2; justify-self: start; }
    .serwis-cart__item-rm { grid-column: 3; grid-row: 2; justify-self: end; }
    .serwis-cart__summary { padding: 20px 16px; border-radius: 12px; }
    .serwis-cart__total-price { font-size: 20px; }
}

/* ==========================================================================
   F-041 — Scroll reveal (statyczne sekcje: About / Branże / Magazyny EU)
   assets/reveal.js nadaje <html>.serwis-reveal (gate), ustawia --serwis-reveal-i
   (pozycja wśród rodzeństwa) i dodaje .is-inview elementom grupy
   [data-serwis-reveal] po wejściu w viewport. Delay elementu =
   --serwis-reveal-base + i × --serwis-reveal-step (step dziedziczony
   z kontenera kolekcji); duration/easing per element przez --serwis-reveal-dur
   / --serwis-reveal-easefn. Tranzycje żyją WYŁĄCZNIE w stanie .is-inview —
   wejście gate'a chowa elementy natychmiast, bez widocznego wygaszania.
   Bez JS lub przy prefers-reduced-motion stany ukryte nie istnieją.
   Kolejność reguł znacząca: baza → warianty (ukryte) → stany końcowe;
   remisy specificity (0,3,1) rozstrzyga pozycja w pliku.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    :root {
        --sb-reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
    }

    html.serwis-reveal .serwis-reveal-item {
        --serwis-reveal-delay: calc(var(--serwis-reveal-base, 0s) + var(--serwis-reveal-i, 0) * var(--serwis-reveal-step, 0s));
        opacity: 0;
        transform: translateY(14px);
    }

    /* --- Nagłówek sekcji: eyebrow → heading → linia (rośnie od lewej) → lead */
    html.serwis-reveal :is(.serwis-about__eyebrow, .serwis-branze__eyebrow, .serwis-magazyny-eu__eyebrow).serwis-reveal-item {
        transform: none;
    }
    html.serwis-reveal :is(.serwis-about__heading, .serwis-branze__heading, .serwis-magazyny-eu__heading, .serwis-offer__heading).serwis-reveal-item {
        --serwis-reveal-base: 0.08s;
    }
    html.serwis-reveal :is(.serwis-about__lead, .serwis-branze__lead, .serwis-magazyny-eu__lead, .serwis-offer__lead).serwis-reveal-item {
        --serwis-reveal-base: 0.18s;
    }
    html.serwis-reveal :is(.serwis-about__divider, .serwis-about__stats-divider, .serwis-magazyny-eu__divider, .serwis-offer__divider).serwis-reveal-item {
        --serwis-reveal-base: 0.3s;
        --serwis-reveal-dur: 0.7s;
        transform: scaleX(0);
        transform-origin: left center;
    }

    /* --- About: logo → kreska → staty kolejno; treść schodkowo za nagłówkiem */
    html.serwis-reveal .serwis-about__img.serwis-reveal-item {
        --serwis-reveal-base: 0.1s;
        transform: translateY(10px);
    }
    html.serwis-reveal .serwis-about__stats {
        --serwis-reveal-base: 0.38s;
        --serwis-reveal-step: 0.09s;
    }
    html.serwis-reveal .serwis-about__stat.serwis-reveal-item { transform: translateY(10px); }
    html.serwis-reveal .serwis-about__body.serwis-reveal-item { --serwis-reveal-base: 0.26s; }
    html.serwis-reveal :is(.serwis-about__actions, .serwis-offer__actions).serwis-reveal-item { --serwis-reveal-base: 0.34s; }

    /* --- Oferta: skróty kategorii kaskadą (wrapper __shortcut-cell animuje —
       kafelek ma własny hover-transform, którego stan końcowy reveal by skasował) */
    html.serwis-reveal .serwis-offer__shortcuts {
        --serwis-reveal-base: 0.42s;
        --serwis-reveal-step: 0.06s;
    }
    html.serwis-reveal .serwis-offer__shortcut-cell.serwis-reveal-item { transform: translateY(14px); }
    html.serwis-reveal .serwis-offer__badge.serwis-reveal-item { transform: none; }
    html.serwis-reveal .serwis-offer__photo.serwis-reveal-item {
        --serwis-reveal-base: 0.2s;
        --serwis-reveal-dur: 0.85s;
        transform: none;
    }

    /* --- Branże: kafel 01 wchodzi razem z leadem, potem karty 02 → 09 kaskadą */
    html.serwis-reveal .serwis-branze-feature.serwis-reveal-item {
        --serwis-reveal-base: 0.26s;
        --serwis-reveal-dur: 0.8s;
        transform: translateY(16px);
    }
    html.serwis-reveal .serwis-branze__grid {
        --serwis-reveal-base: 0.1s;
        --serwis-reveal-step: 0.055s;
    }
    html.serwis-reveal .serwis-branze-card.serwis-reveal-item { transform: translateY(18px); }
    html.serwis-reveal .serwis-branze__cta.serwis-reveal-item { transform: translateY(10px); }

    /* --- Magazyny EU: legenda → nota */
    html.serwis-reveal .serwis-magazyny-eu__legend.serwis-reveal-item {
        --serwis-reveal-base: 0.12s;
        transform: none;
    }
    html.serwis-reveal .serwis-magazyny-eu__note.serwis-reveal-item {
        --serwis-reveal-base: 0.85s;
        transform: none;
    }

    /* --- Mapa EU (osobna grupa — figure): tło 28 państw wchodzi fade'em, obrysy
       ośmiu krajów sprzedaży rysują się (pathLength=1), potem pinezki kolejno,
       na końcu podpis. Rysowanie wszystkich 28 konturów naraz było nieczytelne. */
    html.serwis-reveal .serwis-magazyny-eu__shapes.serwis-reveal-item {
        --serwis-reveal-base: 0.3s;
        --serwis-reveal-dur: 0.8s;
        transform: none;
    }
    html.serwis-reveal .serwis-magazyny-eu__outline {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
    }
    html.serwis-reveal .serwis-magazyny-eu__pins {
        --serwis-reveal-base: 0.95s;
        --serwis-reveal-step: 0.05s;
    }
    html.serwis-reveal .serwis-magazyny-eu__pin.serwis-reveal-item {
        --serwis-reveal-dur: 0.45s;
        --serwis-reveal-easefn: cubic-bezier(0.34, 1.56, 0.64, 1);
        /* Pinezka stoi na translacie o połowę własnego rozmiaru — skala musi go
           zachować, inaczej stan końcowy `transform: none` zbiłby jej pozycję. */
        transform: translate(-50%, -50%) scale(0.2);
    }
    html.serwis-reveal .serwis-magazyny-eu__caption.serwis-reveal-item {
        --serwis-reveal-base: 1.6s;
        transform: none;
    }

    /* --- Stany końcowe (ostatnie — wygrywają remisy specificity).
       border-color w liście tranzycji: karta branży ma własny hover na border
       (style bazowe), a ten shorthand by go skasował; delay 0s, bo delay
       reveal dotyczy tylko opacity/transform. */
    html.serwis-reveal .serwis-reveal-item.is-inview {
        opacity: 1;
        transform: none;
        transition:
            opacity var(--serwis-reveal-dur, 0.65s) var(--serwis-reveal-easefn, var(--sb-reveal-ease)),
            transform var(--serwis-reveal-dur, 0.65s) var(--serwis-reveal-easefn, var(--sb-reveal-ease)),
            border-color 0.2s ease;
        transition-delay: var(--serwis-reveal-delay), var(--serwis-reveal-delay), 0s;
    }
    html.serwis-reveal .serwis-magazyny-eu__map.is-inview .serwis-magazyny-eu__outline {
        stroke-dashoffset: 0;
        transition: stroke-dashoffset 1.4s cubic-bezier(0.65, 0, 0.35, 1) 0.4s;
    }
    html.serwis-reveal .serwis-magazyny-eu__pin.serwis-reveal-item.is-inview {
        transform: translate(-50%, -50%);
    }
}

/* ==========================================================================
   F-068 — Kurtyna zmiany języka
   Stany: .is-active (po kliku, choreografia) · html.serwis-lang-veil-hold
   (nowa strona, pozycje końcowe, bez animacji) · .is-leaving (gaśnie).
   ========================================================================== */
.serwis-lang-veil {
    position: fixed;
    inset: 0;
    z-index: 10000; /* nad szufladą (9999) — kurtyna zamyka wszystko */
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sb-blue-900);
    color: #fff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease, visibility 0s linear 0.4s;
}
.serwis-lang-veil.is-active,
html.serwis-lang-veil-hold .serwis-lang-veil {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.22s ease, visibility 0s;
}
/* Drugi selektor bije `html.serwis-lang-veil-hold .serwis-lang-veil` (0,2,1) — inaczej
   gaszenie na nowej stronie nie ruszy i kurtynę zdejmie dopiero bezpiecznik. */
.serwis-lang-veil.is-leaving,
html.serwis-lang-veil-hold .serwis-lang-veil.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    animation: none;
    transition: opacity 0.55s ease, visibility 0s linear 0.55s;
}
/* Bezpiecznik: gdyby JS nie doszedł do głosu, kurtyna z nowej strony schodzi sama. */
html.serwis-lang-veil-hold .serwis-lang-veil { animation: serwis-veil-autohide 0s linear 4s forwards; }
@keyframes serwis-veil-autohide { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.serwis-lang-veil__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    padding: 24px;
}

.serwis-lang-veil__logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.serwis-lang-veil__bar {
    width: 6px;
    height: 52px;
    flex: 0 0 6px;
    border-radius: 3px;
    background: var(--sb-accent);
    transform: scaleY(0);
    transform-origin: top;
}
.serwis-lang-veil__word {
    display: inline-flex;
    font-weight: 900;
    font-size: 56px;
    letter-spacing: 0.04em;
    line-height: 1;
}
.serwis-lang-veil__letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(-40%);
}
.serwis-lang-veil__dot {
    font-weight: 700;
    font-size: 22px;
    color: var(--sb-accent-light);
    letter-spacing: 0.03em;
    align-self: flex-end;
    margin-bottom: 4px;
    margin-left: -8px;
    opacity: 0;
}

.serwis-lang-veil__progress {
    width: 120px;
    height: 2px;
    border-radius: 1px;
    background: rgba(255, 255, 255, 0.12);
    overflow: hidden;
}
.serwis-lang-veil__progress-bar {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--sb-accent-light);
    transform: scaleX(0);
    transform-origin: left;
}

/* Kod języka jak licznik: stary wyjeżdża górą, nowy wjeżdża od dołu. */
.serwis-lang-veil__lang {
    position: relative;
    height: 20px;
    min-width: 40px;
    overflow: hidden;
    font-family: 'IBM Plex Mono', ui-monospace, monospace;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.22em;
    color: rgba(255, 255, 255, 0.6);
    text-align: center;
}
.serwis-lang-veil__code {
    position: absolute;
    inset: 0;
    line-height: 20px;
}
.serwis-lang-veil__code--from { opacity: 0; }
.serwis-lang-veil__code--to { opacity: 0; transform: translateY(100%); }

/* --- Choreografia po kliku --- */
.serwis-lang-veil.is-active .serwis-lang-veil__letter { animation: serwis-veil-settle 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; }
.serwis-lang-veil.is-active .serwis-lang-veil__letter:nth-child(2) { animation-delay: 0.05s; }
.serwis-lang-veil.is-active .serwis-lang-veil__letter:nth-child(3) { animation-delay: 0.1s; }
.serwis-lang-veil.is-active .serwis-lang-veil__letter:nth-child(4) { animation-delay: 0.15s; }
.serwis-lang-veil.is-active .serwis-lang-veil__letter:nth-child(5) { animation-delay: 0.2s; }
.serwis-lang-veil.is-active .serwis-lang-veil__bar { animation: serwis-veil-bar 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both; }
.serwis-lang-veil.is-active .serwis-lang-veil__dot { animation: serwis-veil-fade 0.4s ease 0.5s both; }
.serwis-lang-veil.is-active .serwis-lang-veil__progress-bar { animation: serwis-veil-progress 1.05s cubic-bezier(0.4, 0, 0.2, 1) 0.25s both; }
.serwis-lang-veil.is-active .serwis-lang-veil__code--from { animation: serwis-veil-code-out 0.45s cubic-bezier(0.4, 0, 0.2, 1) 0.6s both; }
.serwis-lang-veil.is-active .serwis-lang-veil__code--to { animation: serwis-veil-code-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.72s both; }

@keyframes serwis-veil-settle { from { opacity: 0; transform: translateY(-40%); } to { opacity: 1; transform: none; } }
@keyframes serwis-veil-bar { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes serwis-veil-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes serwis-veil-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes serwis-veil-code-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-100%); } }
@keyframes serwis-veil-code-in { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } }

/* --- Nowa strona: pozycje końcowe bez animacji, kod „from" = nowy język --- */
html.serwis-lang-veil-hold .serwis-lang-veil__letter,
html.serwis-lang-veil-hold .serwis-lang-veil__dot,
html.serwis-lang-veil-hold .serwis-lang-veil__code--from { opacity: 1; transform: none; }
html.serwis-lang-veil-hold .serwis-lang-veil__bar { transform: scaleY(1); }
html.serwis-lang-veil-hold .serwis-lang-veil__progress-bar { transform: scaleX(1); }

@media (max-width: 689px) {
    .serwis-lang-veil__word { font-size: 44px; }
    .serwis-lang-veil__bar { height: 42px; width: 5px; flex-basis: 5px; }
    .serwis-lang-veil__dot { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .serwis-lang-veil.is-active .serwis-lang-veil__letter,
    .serwis-lang-veil.is-active .serwis-lang-veil__bar,
    .serwis-lang-veil.is-active .serwis-lang-veil__dot,
    .serwis-lang-veil.is-active .serwis-lang-veil__progress-bar,
    .serwis-lang-veil.is-active .serwis-lang-veil__code--from,
    .serwis-lang-veil.is-active .serwis-lang-veil__code--to { animation-duration: 0.01s; animation-delay: 0s; }
}

/* ==========================================================================
   F-071 — Strony prawne (regulamin, polityka, RODO, zwroty)
   Treść stron pochodzi z `docs/legal/<lang>/*.html`, więc klasy siedzą w treści,
   nie w szablonie. Tylko dwa elementy, których sam Blocksy nie obsłuży.
   ========================================================================== */
.serwis-legal__tabela {
    overflow-x: auto;
    margin-block-end: 24px;
    /* Pasek przewijania mówi „tu jest dalszy ciąg" — bez niego kolumna z okresem
       przechowywania znika pod krawędzią ekranu i klient na telefonie jej nie przeczyta. */
    scrollbar-width: thin;
}

.serwis-legal__tabela > table {
    /* Blocksy daje tabeli w treści ujemny margines (wyjście poza kolumnę tekstu); w pudełku
       z przewijaniem przesuwałby zawartość pod lewą krawędź. */
    margin: 0;
    min-width: 640px;
}

.serwis-legal__pierwszenstwo {
    margin-block-start: 40px;
    padding: 16px 20px;
    border-inline-start: 3px solid var(--sb-accent);
    background: var(--sb-surface);
    color: var(--sb-muted);
    font-size: 15px;
}

/* ==========================================================================
   CookieYes — pływająca plakietka zgód
   ========================================================================== */

/* Kolor marki na plakietce. CookieYes 3.5.6 nie czyta `revisitConsent.styles`
   z konfiguracji dla tła `.cky-btn-revisit-wrapper` (baner i przyciski owszem) —
   zostaje domyślny #0056a7. `!important`, bo wtyczka wpisuje tło inline z JS. */
.cky-btn-revisit-wrapper {
    background: var(--sb-accent) !important;
}

/* Na telefonie plakietka siedzi w lewym dolnym rogu i zakrywa cenę w przyklejonej
   belce „do koszyka" (F-020). Ustawienia zgód zostają dostępne linkiem „Ustawienia
   cookies" w stopce (`.cky-banner-element`), więc na mobile plakietka znika.
   `!important` — wtyczka ustawia `display` inline z własnego JS. */
@media (max-width: 768px) {
    .cky-btn-revisit-wrapper {
        display: none !important;
    }
}