/* =====================================================
   Infology Page Builder — Frontend CSS
   ===================================================== */

/* ── Zmienne ────────────────────────────────────────── */
:root {
    --inbld-max:     1200px;
    --inbld-px:      24px;
    --inbld-col-gap: 16px;
    --inbld-green:   #5a9a2e;
    --inbld-radius:  8px;
}

/* ════════════════════════════════════════════════════
   SEKCJA / WIERSZ
   ════════════════════════════════════════════════════ */

/* Bazowa sekcja — zawsze 100% szerokości swojego rodzica */
.inbld-row-wrap {
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* Overlay na tle obrazu */
.inbld-row-overlay {
    position: absolute; inset: 0;
    background: #000; pointer-events: none; z-index: 0;
}

/* Pełna wysokość ekranu — tylko min-height, bez flex żeby nie psuć slidera */
.inbld-row-wrap--fullh {
    min-height: 100vh;
}

/* ── Kontener treści (max-width) ─────────────────────── */
.inbld-row-inner {
    position: relative;
    max-width: var(--inbld-max);
    margin: 0 auto;
    padding: 0 var(--inbld-px);
    box-sizing: border-box;
    z-index: 1;
}

/* Treść fullwidth — bez max-width */
.inbld-row-inner--full {
    max-width: none;
    padding: 0;
}

/* ── Kolumny ─────────────────────────────────────────── */
.inbld-cols {
    display: flex;
    flex-wrap: wrap;
    gap: var(--inbld-col-gap);
    align-items: flex-start;
}

.inbld-col {
    box-sizing: border-box;
    min-width: 0;
}

/* ── Element placeholder ─────────────────────────────── */
.inbld-placeholder {
    padding: 24px; text-align: center;
    border: 2px dashed #ddd; border-radius: var(--inbld-radius);
    color: #999; font-size: 13px;
}

/* ════════════════════════════════════════════════════
   STRETCH — full-viewport width
   Sekcja wychodzi poza kontener motywu.
   Renderowana bezpośrednio przez PHP — brak max-width.
   ════════════════════════════════════════════════════ */
/* STRETCH — czyste CSS, zero JavaScript, zero subpikselowych błędów
   Technika: element wyśrodkowany (left:50%) przesuwa się o -50vw w lewo,
   szerokość 100vw. html{overflow-x:hidden} chowa ~17px scrollbara.       */
.inbld-row-wrap--stretch {
    position: relative;
    left: 50%;
    margin-left: -50vw;
    width: 100vw;
    max-width: 100vw;
    box-sizing: border-box;
}
html { overflow-x: hidden; }

/* ════════════════════════════════════════════════════
   SLIDER — pełna szerokość, zero padding
   ════════════════════════════════════════════════════ */

/* Stslider v6 styles */
.stslider {
    --stsl-primary:      #6ab04c;
    --stsl-primary-dark: #5a9940;
    --stsl-transition:   0.65s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative; width: 100%;
    height: var(--stsl-height, 580px);
    overflow: hidden; background: #1a1a1a;
    user-select: none; -webkit-user-select: none;
    display: block;
}
.stslider__track { position: relative; width: 100%; height: 100%; }
.stslider__slide {
    position: absolute; inset: 0; opacity: 0; visibility: hidden;
    transition: opacity var(--stsl-transition), visibility var(--stsl-transition);
    color: var(--stsl-text-color, #fff);
}
.stslider__slide--active  { opacity: 1; visibility: visible; z-index: 1; }
.stslider__slide--leaving { opacity: 0; visibility: visible; z-index: 0; }
.stslider__img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; transition: transform 8s ease; transform: scale(1.04);
}
.stslider__slide--active .stslider__img { transform: scale(1); }
a.stslider__img-link { position: absolute; inset: 0; display: block; z-index: 1; }
a.stslider__img-link img { width: 100%; height: 100%; object-fit: cover; transition: transform 8s ease; transform: scale(1.04); position: absolute; inset: 0; }
.stslider__slide--active a.stslider__img-link img { transform: scale(1); }
.stslider__overlay { position: absolute; inset: 0; background: rgba(0,0,0,var(--stsl-overlay,.45)); pointer-events: none; z-index: 2; }
.stslider__content {
    position: absolute; z-index: 3;
    padding: clamp(24px,5vw,72px); max-width: min(680px,90%);
    display: flex; flex-direction: column; gap: 16px;
}
.stslider__content--left   { text-align:left;   align-items:flex-start; }
.stslider__content--center { text-align:center; align-items:center; }
.stslider__content--right  { text-align:right;  align-items:flex-end; }
.stslider__content--center       { top:50%; left:50%; transform:translate(-50%,-50%); }
.stslider__content--center-left  { top:50%; left:0;   transform:translateY(-50%); }
.stslider__content--center-right { top:50%; right:0;  transform:translateY(-50%); left:auto; }
.stslider__content--top-left     { top:10%; left:0; }
.stslider__content--top-center   { top:10%; left:50%; transform:translateX(-50%); }
.stslider__content--bottom-left  { bottom:15%; left:0; top:auto; }
.stslider__content--bottom-center{ bottom:15%; left:50%; transform:translateX(-50%); top:auto; }
.stslider__slide--active .stslider__badge,
.stslider__slide--active .stslider__title,
.stslider__slide--active .stslider__subtitle,
.stslider__slide--active .stslider__btns { animation: stsl-fadein .7s ease both; }
.stslider__slide--active .stslider__title    { animation-delay:.10s; }
.stslider__slide--active .stslider__subtitle { animation-delay:.20s; }
.stslider__slide--active .stslider__btns     { animation-delay:.30s; }
@keyframes stsl-fadein { from{opacity:0;transform:translateY(18px)} to{opacity:1;transform:none} }
.stslider__badge { display:inline-block; background:var(--stsl-badge-bg,var(--stsl-primary)); color:var(--stsl-badge-color,#fff); font-size:11px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:5px 12px; border-radius:100px; }
.stslider__title { margin:0; font-size:clamp(26px,4.5vw,62px); font-weight:800; line-height:1.1; letter-spacing:-.02em; color:var(--stsl-title-color,inherit); text-shadow:0 2px 20px rgba(0,0,0,.3); }
.stslider__title span { color:var(--stsl-primary); }
.stslider__subtitle { margin:0; font-size:clamp(14px,1.6vw,20px); font-weight:400; line-height:1.55; color:var(--stsl-subtitle-color,inherit); opacity:.90; max-width:520px; text-shadow:0 1px 8px rgba(0,0,0,.25); }
.stslider__btns { display:flex; flex-wrap:wrap; gap:12px; margin-top:4px; }
.stslider__btn { display:inline-flex; align-items:center; padding:14px 32px; font-size:15px; font-weight:700; text-decoration:none; border-radius:8px; border:2px solid transparent; transition:background .2s,color .2s,border-color .2s,transform .15s; min-height:48px; white-space:nowrap; }
.stslider__btn:active { transform:scale(.97); }
.stslider__btn:focus-visible { outline:3px solid var(--stsl-primary); outline-offset:3px; }
.stslider__btn--primary { background:var(--stsl-btn1-bg,var(--stsl-primary)); color:var(--stsl-btn1-color,#fff); border-color:var(--stsl-btn1-bg,var(--stsl-primary)); }
.stslider__btn--primary:hover { background:var(--stsl-btn1-hover,var(--stsl-primary-dark)); border-color:var(--stsl-btn1-hover,var(--stsl-primary-dark)); color:var(--stsl-btn1-color,#fff); }
.stslider__btn--outline { background:rgba(255,255,255,.12); color:var(--stsl-btn2-color,#fff); border-color:var(--stsl-btn2-border,rgba(255,255,255,.6)); backdrop-filter:blur(4px); }
.stslider__btn--outline:hover { background:rgba(255,255,255,.22); border-color:#fff; }
.stslider__arrow { position:absolute; top:50%; transform:translateY(-50%); z-index:10; width:52px; height:52px; border:none; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s,transform .2s; backdrop-filter:blur(6px); }
.stslider__arrow:hover { background:rgba(255,255,255,.30); transform:translateY(-50%) scale(1.08); }
.stslider__arrow:focus-visible { outline:3px solid var(--stsl-primary); outline-offset:3px; }
.stslider__arrow--prev { left:20px; }
.stslider__arrow--next { right:20px; }
.stsl-indicators { position:absolute; bottom:24px; left:50%; transform:translateX(-50%); z-index:10; display:flex; gap:10px; align-items:center; }

/* ── Styl: BUTTONS (domyślny) ── */
.stsl-ind { position:relative; border:none; background:rgba(0,0,0,.40); backdrop-filter:blur(8px); color:rgba(255,255,255,.55); padding:10px 22px; border-radius:7px; cursor:pointer; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; min-width:110px; min-height:44px; display:flex; align-items:center; justify-content:center; transition:background .25s,color .25s; overflow:visible; }
.stsl-ind:hover { background:rgba(0,0,0,.55); color:rgba(255,255,255,.80); }
.stsl-ind--active { background:rgba(0,0,0,.55); color:#fff; }
.stsl-ind:focus-visible { outline:3px solid var(--stsl-primary); outline-offset:3px; }
.stsl-ind__svg { position:absolute; inset:-2px; width:calc(100% + 4px); height:calc(100% + 4px); pointer-events:none; overflow:visible; }
.stsl-ind__rect-bg { fill:none; stroke:rgba(255,255,255,.15); stroke-width:1.5; }
.stsl-ind--active .stsl-ind__rect-bg { stroke:rgba(255,255,255,.25); }
.stsl-ind__rect-progress { fill:none; stroke:var(--stsl-primary,#6ab04c); stroke-width:2.5; stroke-linecap:butt; stroke-dasharray:0 480; stroke-dashoffset:0; }
@keyframes stsl-border-draw { from{stroke-dasharray:0 480} to{stroke-dasharray:480 0} }

/* ── Styl: DOTS ── */
.stslider--ind-dots .stsl-indicators { gap:8px; bottom:18px; }
.stslider--ind-dots .stsl-ind {
    width:10px; height:10px; min-width:10px; min-height:10px;
    padding:0; border-radius:50%;
    background:rgba(255,255,255,.4);
    overflow:hidden;
    transition:background .25s, transform .25s;
}
.stslider--ind-dots .stsl-ind--active {
    background:var(--stsl-primary,#6ab04c);
    transform:scale(1.3);
}
.stslider--ind-dots .stsl-ind__svg,
.stslider--ind-dots .stsl-ind__label { display:none; }

/* ── Styl: LINES ── */
.stslider--ind-lines .stsl-indicators { gap:6px; bottom:16px; }
.stslider--ind-lines .stsl-ind {
    width:40px; height:4px; min-width:24px; min-height:4px;
    padding:0; border-radius:2px;
    background:rgba(255,255,255,.3);
    overflow:hidden;
    transition:width .25s;
    position:relative;
}
.stslider--ind-lines .stsl-ind--active { width:64px; }
.stslider--ind-lines .stsl-ind__label  { display:none; }
/* Ukryj SVG całkowicie dla linii — używamy ::before fill */
.stslider--ind-lines .stsl-ind__svg    { display:none; }
/* Wypełnienie lewo→prawo przez ::before */
.stslider--ind-lines .stsl-ind::before {
    content:'';
    position:absolute;
    inset:0;
    width:0;
    background:var(--stsl-primary,#6ab04c);
    border-radius:2px;
    transition:none;
}
.stslider--ind-lines .stsl-ind--active::before {
    animation:stsl-line-fill var(--stsl-anim-dur,5000ms) linear forwards;
}
@keyframes stsl-line-fill {
    from { width:0; }
    to   { width:100%; }
}

/* Zaokrąglone rogi slidera */
.stslider--shape-rounded { border-radius:16px; overflow:hidden; }

/* Responsive: przełączenie na mobile (klasy dodawane przez JS) */
@media (max-width: 600px) {
    .stslider--ind-mob-dots .stsl-ind {
        width:10px; height:10px; min-width:10px; min-height:10px;
        padding:0; border-radius:50%;
        background:rgba(255,255,255,.4);
    }
    .stslider--ind-mob-dots .stsl-ind--active {
        background:var(--stsl-primary,#6ab04c); transform:scale(1.3);
    }
    .stslider--ind-mob-dots .stsl-ind__svg,
    .stslider--ind-mob-dots .stsl-ind__label { display:none; }

    .stslider--ind-mob-lines .stsl-ind {
        width:40px; height:4px; min-width:24px; min-height:4px;
        padding:0; border-radius:2px;
        background:rgba(255,255,255,.3);
        overflow:hidden;
        position:relative;
    }
    .stslider--ind-mob-lines .stsl-ind--active { width:64px; }
    .stslider--ind-mob-lines .stsl-ind__label { display:none; }
    .stslider--ind-mob-lines .stsl-ind__svg   { display:none; }
    .stslider--ind-mob-lines .stsl-ind::before {
        content:'';
        position:absolute;
        inset:0;
        width:0;
        background:var(--stsl-primary,#6ab04c);
        border-radius:2px;
        transition:none;
    }
    .stslider--ind-mob-lines .stsl-ind--active::before {
        animation:stsl-line-fill var(--stsl-anim-dur,5000ms) linear forwards;
    }

    .stslider--ind-mob-buttons .stsl-ind {
        min-width:80px; padding:8px 12px; font-size:10px;
        width:auto; height:auto; border-radius:7px;
        background:rgba(0,0,0,.40);
    }
}
.stsl-pause-btn { position:absolute; bottom:24px; right:20px; z-index:10; width:40px; height:40px; border:none; border-radius:50%; background:rgba(0,0,0,.35); backdrop-filter:blur(6px); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:background .2s,transform .2s; }
.stsl-pause-btn:hover { background:rgba(0,0,0,.55); transform:scale(1.1); }
.stsl-pause-btn:focus-visible { outline:3px solid var(--stsl-primary); outline-offset:3px; }
.stsl-pause-btn--paused { background:rgba(106,176,76,.5); }
.stsl-pause-icon,.stsl-play-icon { display:flex; align-items:center; justify-content:center; }
.stsl-play-icon { display:none; }

/* ════════════════════════════════════════════════════
   PASEK ZALET (features bar)
   ════════════════════════════════════════════════════ */
/* ════════════════════════════════════════════════════
   PASEK ZALET — cztery tryby: bar / grid / ticker / carousel
   Tryb desktop: .inbld-features--d-{mode}
   Tryb mobile (≤600px): .inbld-features--m-{mode}
   ════════════════════════════════════════════════════ */
.inbld-features {
    width: 100%;
    background: var(--color-bg, #fff);
    border-top: 1px solid var(--color-border, #ece9e1);
    border-bottom: 1px solid var(--color-border, #ece9e1);
    overflow: hidden;
}

/* ── Elementy: wspólne ──────────────────────────────── */
.inbld-features__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; align-items: stretch;
}
.inbld-features__item {
    display: flex; align-items: center; gap: 14px;
    padding: 20px 24px; min-width: 0;
}
.inbld-features__icon {
    width: 44px; height: 44px;
    background: color-mix(in srgb, var(--color-primary, #27ae60) 12%, #fff);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: var(--color-primary, #27ae60); flex-shrink: 0;
}
.inbld-features__icon svg { width: 22px; height: 22px; }
.inbld-features__text strong { display: block; font-size: 14px; font-weight: 700; color: var(--color-heading,#1e1e1e); line-height: 1.3; }
.inbld-features__text span   { display: block; font-size: 12px; color: var(--color-text,#888); margin-top: 2px; }
.inbld-features__sep {
    width: 1px; background: var(--color-border,#ece9e1); flex-shrink: 0;
    margin: 12px 0; list-style: none; align-self: stretch;
}

/* ══════════════════════════════════════════════════════
   TRYB: BAR (domyślny desktop)
   ══════════════════════════════════════════════════════ */
.inbld-features--d-bar .inbld-features__list {
    flex-wrap: nowrap;
}
.inbld-features--d-bar .inbld-features__item {
    flex: 1;
}

/* ══════════════════════════════════════════════════════
   TRYB: GRID (2-kolumnowy)
   ══════════════════════════════════════════════════════ */
.inbld-features--d-grid .inbld-features__list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}
.inbld-features--d-grid .inbld-features__item {
    border-bottom: 1px solid var(--color-border, #ece9e1);
}
.inbld-features--d-grid .inbld-features__item:nth-child(odd) {
    border-right: 1px solid var(--color-border, #ece9e1);
}
.inbld-features--d-grid .inbld-features__sep { display: none; }

/* ══════════════════════════════════════════════════════
   TRYB: TICKER (przewijający się pasek)
   ══════════════════════════════════════════════════════ */
.inbld-features--d-ticker,
.inbld-features--m-ticker {
    --feat-ticker-dur: 30s; /* nadpisywane przez inline style */
}
/* Wrapper ze scrollem — przekształcamy w scroll container */
/* Drugi duplikat (aria-hidden) widoczny TYLKO w trybie ticker */
.inbld-features:not(.inbld-features--d-ticker) .inbld-features__list[aria-hidden="true"] {
    display: none;
}
@media (max-width: 600px) {
    .inbld-features:not(.inbld-features--m-ticker) .inbld-features__list[aria-hidden="true"] {
        display: none;
    }
}

.inbld-features--d-ticker {
    display: flex;
    position: relative;
    touch-action: pan-y;
    cursor: grab;
}
.inbld-features--d-ticker:active { cursor: grabbing; }
.inbld-features--d-ticker .inbld-features__list {
    flex-wrap: nowrap;
    flex-shrink: 0;
    animation: feat-ticker var(--feat-ticker-dur) linear infinite;
    will-change: transform;
}
.inbld-features--d-ticker .inbld-features__list--track {
    /* drugi duplikat lista, widoczny w CSS animacji */
}
.inbld-features--d-ticker .inbld-features__item {
    white-space: nowrap;
    flex-shrink: 0;
    padding: 18px 28px;
}
.inbld-features--d-ticker .inbld-features__sep {
    margin: 14px 0;
}
.inbld-features--d-ticker:hover .inbld-features__list,
.inbld-features--d-ticker:focus-within .inbld-features__list {
    animation-play-state: paused;
}

@keyframes feat-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* Używana po puszczeniu drag — kontynuuje od zamrożonego offsetu */
@keyframes feat-ticker-from {
    to { transform: translateX(-50%); }
}

/* Zatrzymaj przy reduced motion (WCAG) */
@media (prefers-reduced-motion: reduce) {
    .inbld-features__list {
        animation: none !important;
    }
    .inbld-features--d-ticker,
    .inbld-features--m-ticker {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ══════════════════════════════════════════════════════
   TRYB: CAROUSEL (przeciągany)
   ══════════════════════════════════════════════════════ */
.inbld-features--d-carousel {
    display: flex;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}
.inbld-features--d-carousel:active { cursor: grabbing; }
.inbld-features--d-carousel .inbld-features__list {
    flex-wrap: nowrap;
    overflow: visible;
    transition: transform .25s ease;
    will-change: transform;
}
.inbld-features--d-carousel .inbld-features__item {
    flex: 0 0 auto;
    min-width: 220px;
}
.inbld-features--d-carousel .inbld-features__sep { margin: 14px 0; }

/* ══════════════════════════════════════════════════════
   MOBILE (≤600px) — przełączanie trybów
   ══════════════════════════════════════════════════════ */
@media (max-width: 600px) {

    /* MOBILE: BAR → pionowa lista */
    .inbld-features--m-bar .inbld-features__list {
        flex-direction: column;
        flex-wrap: wrap;
    }
    .inbld-features--m-bar .inbld-features__item {
        flex: 1 1 100%;
        border-bottom: 1px solid var(--color-border, #ece9e1);
    }
    .inbld-features--m-bar .inbld-features__sep { display: none; }

    /* MOBILE: GRID */
    .inbld-features--m-grid .inbld-features__list {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        flex-wrap: unset;
    }
    .inbld-features--m-grid .inbld-features__item {
        flex: unset;
        padding: 16px 14px;
        flex-direction: column;
        text-align: center;
        border-bottom: 1px solid var(--color-border, #ece9e1);
    }
    .inbld-features--m-grid .inbld-features__item:nth-child(odd) {
        border-right: 1px solid var(--color-border, #ece9e1);
    }
    .inbld-features--m-grid .inbld-features__sep { display: none; }

    /* MOBILE: TICKER */
    .inbld-features--m-ticker {
        display: flex !important;
        touch-action: pan-y;
        cursor: grab;
    }
    .inbld-features--m-ticker:active { cursor: grabbing; }
    .inbld-features--m-ticker .inbld-features__list {
        flex-wrap: nowrap !important;
        flex-shrink: 0;
        animation: feat-ticker var(--feat-ticker-dur) linear infinite;
    }
    .inbld-features--m-ticker .inbld-features__item {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 14px 20px;
    }
    .inbld-features--m-ticker:hover .inbld-features__list,
    .inbld-features--m-ticker:focus-within .inbld-features__list {
        animation-play-state: paused;
    }

    /* MOBILE: CAROUSEL */
    .inbld-features--m-carousel {
        cursor: grab;
        display: flex !important;
    }
    .inbld-features--m-carousel:active { cursor: grabbing; }
    .inbld-features--m-carousel .inbld-features__list {
        flex-wrap: nowrap !important;
        transition: transform .25s ease;
    }
    .inbld-features--m-carousel .inbld-features__item {
        flex: 0 0 70vw;
        min-width: 200px;
        padding: 16px 18px;
    }
    .inbld-features--m-carousel .inbld-features__sep { display: none; }
}

/* ════════════════════════════════════════════════════
   BLOKI — TEKST
   ════════════════════════════════════════════════════ */
.inbld-text { padding: 4px 0; }
.inbld-text--left   { text-align: left; }
.inbld-text--center { text-align: center; }
.inbld-text--right  { text-align: right; }
.inbld-text__heading { margin: 0 0 20px; font-weight: 800; line-height: 1.2; }
.inbld-text__body { line-height: 1.7; color: #555; }
/* Wiersze treści — stack pionowy (jak sekcje) */
.inbld-text__rows { display: flex; flex-direction: column; gap: 28px; }
/* Jeden wiersz — domyślnie jedna kolumna */
.inbld-text__row { display: block; }
/* Wiersz dwukolumnowy — identyczny układ jak inflg-tt */
.inbld-text__row--two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--inbld-col-gap, 40px);
    align-items: start;
}
.inbld-text__col-title {
    margin: 0 0 10px;
    font-size: 1.15em;
    font-weight: 700;
    color: var(--color-heading, #1e1e1e);
    line-height: 1.3;
}
@media (max-width: 768px) {
    .inbld-text__row--two-col { grid-template-columns: 1fr; gap: 20px; }
}

/* ════════════════════════════════════════════════════
   BLOKI — CTA BANER
   ════════════════════════════════════════════════════ */
.inbld-cta {
    position: relative; border-radius: var(--inbld-radius);
    overflow: hidden; padding: clamp(32px,6vw,72px) 40px;
    text-align: center;
}
.inbld-cta--left   { text-align: left; }
.inbld-cta--right  { text-align: right; }
.inbld-cta__overlay { position: absolute; inset: 0; background: #000; z-index: 0; pointer-events: none; }
.inbld-cta__body    { position: relative; z-index: 1; }
.inbld-cta__heading { font-size: clamp(22px,4vw,42px); font-weight: 800; color: #fff; margin: 0 0 10px; }
.inbld-cta__sub     { font-size: 16px; color: rgba(255,255,255,.8); margin: 0 0 24px; }
.inbld-cta__btn {
    display: inline-flex; align-items: center;
    padding: 13px 28px; font-size: 15px; font-weight: 700;
    text-decoration: none; border-radius: 8px; color: #fff;
    transition: opacity .15s, transform .1s;
}
.inbld-cta__btn:hover { opacity: .88; transform: translateY(-1px); }
.inbld-cta--sized {
    display: flex; align-items: center; justify-content: center;
    box-sizing: border-box;
}
.inbld-cta--sized .inbld-cta__body { width: 100%; }

/* ════════════════════════════════════════════════════
   BLOKI — SEKCJA NAGŁÓWKA
   ════════════════════════════════════════════════════ */
.inbld-sec-hdr { text-align: center; margin-bottom: 28px; }
.inbld-sec-hdr h2 { font-size: clamp(20px,3vw,34px); font-weight: 800; margin: 0 0 6px; }
.inbld-sec-hdr p  { color: #777; margin: 0; font-size: 15px; }

/* ════════════════════════════════════════════════════
   BLOKI — PRODUKTY
   ════════════════════════════════════════════════════ */
.inbld-pgrid {
    list-style: none; margin: 0; padding: 0;
    display: grid; gap: 16px;
}
.inbld-pgrid--2 { grid-template-columns: repeat(2,1fr); }
.inbld-pgrid--3 { grid-template-columns: repeat(3,1fr); }
.inbld-pgrid--4 { grid-template-columns: repeat(4,1fr); }

.inbld-pcard__img {
    display: block; aspect-ratio: 1; overflow: hidden;
    border-radius: var(--inbld-radius); background: #f5f5f5;
    position: relative; text-decoration: none;
}
.inbld-pcard__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; }
.inbld-pcard__img:hover img { transform: scale(1.04); }
.inbld-sale {
    position: absolute; top: 8px; left: 8px;
    background: #e74c3c; color: #fff; font-size: 9px; font-weight: 800;
    letter-spacing: .08em; padding: 3px 7px; border-radius: 4px; z-index: 2;
}
.inbld-pcard__body { padding: 10px 4px; }
.inbld-pcard__body h3 { font-size: 13px; font-weight: 700; margin: 0 0 6px; line-height: 1.3; }
.inbld-pcard__body h3 a { color: inherit; text-decoration: none; }
.inbld-pcard__body h3 a:hover { color: var(--inbld-green); }
.inbld-pcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.inbld-price { font-size: 14px; font-weight: 700; color: var(--inbld-green); }
.inbld-price del { color: #aaa; font-weight: 400; font-size: 12px; margin-right: 3px; }
.inbld-atc {
    font-size: 11px; font-weight: 700; padding: 6px 12px;
    background: var(--inbld-green); color: #fff; border-radius: 6px;
    text-decoration: none; transition: background .15s;
    white-space: nowrap;
}
.inbld-atc:hover { background: #4a8024; color: #fff; }

/* ════════════════════════════════════════════════════
   BLOKI — KATEGORIE (nowy system, v2)
   Wszystkie wartości przez CSS custom properties
   ustawianych przez scoped <style> z PHP (class-block-categories.php)
   WCAG 2.1 AA: fokus widoczny, kontrast, aria-label
   ════════════════════════════════════════════════════ */

/* ── Nagłówek sekcji ─────────────────────────────── */
.inbld-sec-hdr--left   { text-align: left; }
.inbld-sec-hdr--center { text-align: center; }
.inbld-sec-hdr--right  { text-align: right; }

/* ── Siatka ──────────────────────────────────────── */
.inbld-cat-grid {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    gap: var(--catblk-gap, 16px);
    grid-template-columns: repeat(var(--catblk-cols, 4), 1fr);
}

/* ── Karta (link) — wspólne ──────────────────────── */
.inbld-cat__card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    background: var(--catblk-bg, #fff);
    border-radius: var(--catblk-radius, 8px);
    overflow: hidden;
    border: 1px solid var(--catblk-border, #e2e8f0);
    transition: box-shadow .22s ease, transform .22s ease;
    height: 100%;
    font-family: var(--catblk-font-b, system-ui);
}

/* WCAG: fokus widoczny, offset 3px */
.inbld-cat__card:focus-visible {
    outline: 3px solid var(--catblk-primary, #2563eb);
    outline-offset: 3px;
}

/* ── Hover — scale ───────────────────────────────── */
.inbld-cat-hover--scale .inbld-cat__card:hover .inbld-cat__img img {
    transform: scale(1.06);
}

/* ── Hover — lift ────────────────────────────────── */
.inbld-cat-hover--lift .inbld-cat__card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,.13);
    transform: translateY(-3px);
}

/* ── Obrazy — wspólne ────────────────────────────── */
.inbld-cat__img {
    overflow: hidden;
    background: #f1f5f9;
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.inbld-cat__img img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .35s ease;
}

/* Placeholder SVG */
.inbld-cat__placeholder {
    display: flex; align-items: center; justify-content: center;
    width: 100%; height: 100%;
    opacity: .5;
}

/* Gdy kontener zawiera ikonę SVG (ki-icon) — usuń szare tło kontenera */
.inbld-cat__img:has(.ki-icon) {
    background: transparent;
}

/* ── Tekst ───────────────────────────────────────── */
.inbld-cat__body {
    padding: 12px 14px;
    display: flex; flex-direction: column; gap: 4px;
    flex: 1;
}
.inbld-cat__name {
    display: block;
    font-family: var(--catblk-font-h, system-ui);
    font-weight: 700;
    font-size: 14px;
    color: var(--catblk-heading, #1e293b);
    line-height: 1.3;
    transition: color .2s;
}
.inbld-cat__card:hover .inbld-cat__name,
.inbld-cat__card:focus-visible .inbld-cat__name {
    color: var(--catblk-primary, #2563eb);
}
.inbld-cat__desc {
    display: block;
    font-size: 12px;
    color: var(--catblk-text, #64748b);
    line-height: 1.5;
}
.inbld-cat__count {
    display: block;
    font-size: 11px;
    color: var(--catblk-primary, #2563eb);
    font-weight: 600;
    margin-top: 2px;
}

/* ══════════════════════════════════════════════════
   LAYOUT: circle-below
   ══════════════════════════════════════════════════ */
.inbld-cat-layout--circle-below .inbld-cat__card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 20px 12px 16px;
    background: var(--catblk-bg, #fff);
    border: none;
    box-shadow: none;
}
.inbld-cat-layout--circle-below .inbld-cat__img--circle {
    width: 100px; height: 100px;
    border-radius: 50%;
    margin-bottom: 12px;
}
.inbld-cat-layout--circle-below .inbld-cat__body {
    padding: 0;
    align-items: center;
}

/* ══════════════════════════════════════════════════
   LAYOUT: square-below
   ══════════════════════════════════════════════════ */
.inbld-cat-layout--square-below .inbld-cat__img--square {
    aspect-ratio: 1;
    width: 100%;
}

/* ══════════════════════════════════════════════════
   LAYOUT: card-overlay
   Zdjęcie na pełną kartę, tekst nakładany gradientem
   ══════════════════════════════════════════════════ */
.inbld-cat-layout--card-overlay .inbld-cat__card {
    position: relative;
    height: var(--catblk-overlay-h, 220px);
    border: none;
}
.inbld-cat-layout--card-overlay .inbld-cat__img--overlay {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
}
.inbld-cat-layout--card-overlay .inbld-cat__img--overlay img,
.inbld-cat-layout--card-overlay .inbld-cat__img--overlay .inbld-cat__placeholder {
    width: 100%; height: 100%;
    position: absolute; inset: 0;
}
.inbld-cat-layout--card-overlay .inbld-cat__overlay-body {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 14px 16px;
    background: linear-gradient(to top, rgba(0,0,0,.72) 0%, transparent 100%);
    display: flex; flex-direction: column; gap: 2px;
    z-index: 1;
}
.inbld-cat-layout--card-overlay .inbld-cat__name {
    color: #fff; font-size: 15px;
}
.inbld-cat-layout--card-overlay .inbld-cat__card:hover .inbld-cat__name,
.inbld-cat-layout--card-overlay .inbld-cat__card:focus-visible .inbld-cat__name {
    color: #fff;
    text-decoration: underline;
}
.inbld-cat-layout--card-overlay .inbld-cat__count {
    color: rgba(255,255,255,.8);
}

/* ══════════════════════════════════════════════════
   LAYOUT: card-horizontal
   ══════════════════════════════════════════════════ */
.inbld-cat-layout--card-horizontal .inbld-cat__card {
    flex-direction: row;
    align-items: stretch;
}
.inbld-cat-layout--card-horizontal .inbld-cat__img--horiz {
    width: 36%;
    flex-shrink: 0;
    aspect-ratio: unset;
    min-height: 90px;
}
.inbld-cat-layout--card-horizontal .inbld-cat__body--horiz {
    flex: 1;
    justify-content: center;
}
.inbld-cat-layout--card-horizontal .inbld-cat__arrow {
    display: block;
    font-size: 18px;
    color: var(--catblk-primary, #2563eb);
    margin-top: 6px;
    transition: transform .2s;
}
.inbld-cat-layout--card-horizontal .inbld-cat__card:hover .inbld-cat__arrow {
    transform: translateX(4px);
}

/* ══════════════════════════════════════════════════
   LAYOUT: text-accent (bez obrazu)
   ══════════════════════════════════════════════════ */
.inbld-cat-layout--text-accent .inbld-cat__card {
    flex-direction: row;
    align-items: stretch;
    border: none;
    box-shadow: none;
    background: transparent;
    padding: 0;
    gap: 0;
}
.inbld-cat-layout--text-accent .inbld-cat__accent-bar {
    width: 4px;
    flex-shrink: 0;
    background: var(--catblk-primary, #2563eb);
    border-radius: 4px 0 0 4px;
    transition: width .2s;
}
.inbld-cat-layout--text-accent .inbld-cat__card:hover .inbld-cat__accent-bar {
    width: 6px;
}
.inbld-cat-layout--text-accent .inbld-cat__body--text {
    padding: 14px 16px;
    background: var(--catblk-bg, #fff);
    border: 1px solid var(--catblk-border, #e2e8f0);
    border-left: none;
    border-radius: 0 8px 8px 0;
    flex: 1;
    justify-content: center;
}
.inbld-cat-layout--text-accent .inbld-cat__name {
    font-size: 15px;
}

/* ══════════════════════════════════════════════════
   LAYOUT: badge (pill)
   ══════════════════════════════════════════════════ */
.inbld-cat-layout--badge {
    display: flex; flex-wrap: wrap;
    gap: var(--catblk-gap, 10px);
    grid-template-columns: none !important;
}
.inbld-cat-layout--badge .inbld-cat__item {
    display: contents;
}
.inbld-cat-layout--badge .inbld-cat__card {
    flex-direction: row; align-items: center;
    height: auto;
    border-radius: var(--catblk-btn-radius, 6px);
    background: var(--catblk-primary, #2563eb);
    border: 2px solid var(--catblk-primary, #2563eb);
    color: #fff;
    padding: 0;
    overflow: visible;
}
.inbld-cat-layout--badge .inbld-cat__badge-inner {
    display: flex; align-items: center; gap: 5px;
    padding: 8px 18px;
    font-size: 13px; font-weight: 700;
    color: #fff;
    white-space: nowrap;
}
.inbld-cat-layout--badge .inbld-cat__badge-count {
    opacity: .75; font-weight: 400; font-size: 11px;
}
.inbld-cat-layout--badge .inbld-cat__card:hover,
.inbld-cat-layout--badge .inbld-cat__card:focus-visible {
    background: transparent;
    transform: none;
    box-shadow: none;
}
.inbld-cat-layout--badge .inbld-cat__card:hover .inbld-cat__badge-inner,
.inbld-cat-layout--badge .inbld-cat__card:focus-visible .inbld-cat__badge-inner {
    color: var(--catblk-primary, #2563eb);
}

/* ══════════════════════════════════════════════════
   IKONY KATEGORII — hover na karcie zmienia ikonę
   .ki-icon = wrapper z get_ki_icon_html()
   ══════════════════════════════════════════════════ */

/* Ikona jest wewnątrz .inbld-cat__img — ustawiamy flex center */
.inbld-cat__img .ki-icon {
    transition: background .25s ease, color .25s ease, border-color .25s ease !important;
}

/* Hover na karcie → ikona zmienia tło na primary, kolor na biały */
.inbld-cat__card:hover .ki-icon,
.inbld-cat__card:focus-visible .ki-icon {
    background: var(--catblk-primary, #2563eb) !important;
    color: #fff !important;
    border-color: var(--catblk-primary, #2563eb) !important;
}

/* Hover na karcie → karta dostaje kolorowy border + delikatny cień */
.inbld-cat-layout--circle-below .inbld-cat__card:hover,
.inbld-cat-layout--circle-below .inbld-cat__card:focus-visible,
.inbld-cat-layout--square-below .inbld-cat__card:hover,
.inbld-cat-layout--square-below .inbld-cat__card:focus-visible,
.inbld-cat-layout--card-horizontal .inbld-cat__card:hover,
.inbld-cat-layout--card-horizontal .inbld-cat__card:focus-visible,
.inbld-cat-layout--text-accent .inbld-cat__card:hover,
.inbld-cat-layout--text-accent .inbld-cat__card:focus-visible {
    border-color: var(--catblk-primary, #2563eb) !important;
    box-shadow: 0 4px 20px rgba(0,0,0,.10);
}

/* Specyficznie dla circle-below — płynne przejście border na hover */
.inbld-cat-layout--circle-below .inbld-cat__card {
    transition: border-color .22s ease, box-shadow .22s ease;
    border: 1px solid transparent;
}
.inbld-cat-layout--circle-below .inbld-cat__card:not(:hover):not(:focus-visible) {
    border-color: transparent;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 900px) {
    .inbld-cat-grid {
        grid-template-columns: repeat(var(--catblk-cols-tab, 3), 1fr) !important;
    }
    .inbld-cat-layout--badge {
        grid-template-columns: none !important;
    }
}
@media (max-width: 600px) {
    .inbld-cat-grid {
        grid-template-columns: repeat(var(--catblk-cols-mob, 2), 1fr) !important;
    }
    .inbld-cat-layout--card-horizontal .inbld-cat__img--horiz { width: 42%; }
    .inbld-cat-layout--circle-below .inbld-cat__img--circle { width: 72px; height: 72px; }
    .inbld-cat-layout--badge { grid-template-columns: none !important; }
}

/* ── Reduced motion ──────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .inbld-cat__img img,
    .inbld-cat__card,
    .inbld-cat__accent-bar,
    .inbld-cat__arrow { transition: none !important; }
}

/* ════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .inbld-cols { flex-wrap: wrap; }
    .inbld-col  { flex: 1 1 calc(50% - var(--inbld-col-gap)) !important; max-width: 100% !important; }
    .inbld-pgrid--4 { grid-template-columns: repeat(2,1fr); }
    .inbld-cat-grid--6, .inbld-cat-grid--4 { grid-template-columns: repeat(3,1fr); }
    .inbld-features__list { flex-wrap: wrap; }
    .inbld-features__item { flex: 1 1 calc(50% - 1px); border-top: 1px solid #f0ede5; padding: 16px 20px; }
    .inbld-features__sep  { display: none; }
    /* Slider */
    .stslider { --stsl-height: clamp(260px,60vw,420px) !important; }
    .stslider__arrow { width:40px; height:40px; }
    .stslider__arrow--prev { left:10px; }
    .stslider__arrow--next { right:10px; }
    .stsl-indicators { gap:6px; }
    .stsl-ind { min-width:80px; padding:8px 12px; font-size:10px; }
}
@media (max-width: 600px) {
    .inbld-col  { flex: 1 1 100% !important; max-width: 100% !important; }
    .inbld-pgrid--3, .inbld-pgrid--2 { grid-template-columns: repeat(2,1fr); }
    .inbld-cat-grid--3, .inbld-cat-grid--2 { grid-template-columns: repeat(2,1fr); }
    .inbld-features__item { flex: 1 1 100%; }
    .stslider__arrow { display: none; }
    .stsl-pause-btn { bottom:12px; right:12px; }
    .stsl-indicators { bottom:12px; }
}

/* ── Reduced motion ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .stslider__img, .stslider__slide,
    .stslider__slide--active .stslider__badge,
    .stslider__slide--active .stslider__title,
    .stslider__slide--active .stslider__subtitle,
    .stslider__slide--active .stslider__btns,
    .stsl-ind__rect-progress { transition: none !important; animation: none !important; }
}

/* ── Slider w kolumnie — pełna szerokość kolumny ─────── */
.inbld-el--slider { width: 100%; overflow: hidden; }
.inbld-el--slider .stslider { width: 100%; }

/* ════════════════════════════════════════════════════
   BLOK — KAMPANIA SEZONOWA
   Układ: obrazek po lewej | karuzela produktów po prawej
   ════════════════════════════════════════════════════ */

/* ── Wrapper: side-by-side grid ──────────────────── */
.inbld-campaign {
    display: grid;
    grid-template-columns: 340px 1fr;
    border-radius: var(--inbld-radius);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.08);
}

/* ── Lewa: obrazek kampanii ──────────────────────── */
.inbld-campaign__image {
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: #1e2a0e;
    min-height: 360px;
    display: flex;
    align-items: flex-end;
    padding: clamp(20px,4%,36px);
    box-sizing: border-box;
}
.inbld-campaign__image--left   { text-align: left; }
.inbld-campaign__image--center { text-align: center; align-items: center; }
.inbld-campaign__image--right  { text-align: right; }

.inbld-campaign__overlay {
    position: absolute; inset: 0;
    background: #000; z-index: 0; pointer-events: none;
}
.inbld-campaign__body {
    position: relative; z-index: 1; width: 100%;
}
.inbld-campaign__heading {
    font-size: clamp(18px,2.4vw,32px); font-weight: 800;
    color: #fff; margin: 0 0 8px; line-height: 1.2;
}
.inbld-campaign__sub {
    font-size: 14px; color: rgba(255,255,255,.82);
    margin: 0 0 18px; line-height: 1.5;
}
.inbld-campaign__btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 11px 22px; font-size: 14px; font-weight: 700;
    text-decoration: none; border-radius: 8px; color: #fff;
    transition: opacity .15s, transform .1s;
}
.inbld-campaign__btn:hover { opacity: .88; transform: translateY(-1px); }

/* ── Prawa: kolumna produktów ────────────────────── */
.inbld-campaign__products {
    position: relative;
    background: #f7f5f0;
    padding: 24px 20px 24px 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
    overflow: hidden;
}
.inbld-campaign__products--empty {
    align-items: center;
    min-height: 200px;
}

/* ── Karuzela: track ─────────────────────────────── */
.inbld-campaign__track-wrap {
    overflow: hidden;
    width: 100%;
}
.inbld-campaign__track {
    display: flex;
    will-change: transform;
    /* transition ustawiany przez JS */
}
.inbld-campaign__item {
    flex: 0 0 auto;
    box-sizing: border-box;
    padding: 0 8px;
    align-self: stretch;
}
.inbld-campaign__item:first-child { padding-left: 0; }
.inbld-campaign__item:last-child  { padding-right: 0; }

/* ── Strzałki nawigacji ──────────────────────────── */
.inbld-campaign__arrow {
    position: absolute;
    bottom: 12px;
    z-index: 5;
    width: 32px; height: 32px;
    border: none; border-radius: 50%;
    background: #fff;
    color: #333;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background .18s, box-shadow .18s, transform .18s;
    font-size: 18px; line-height: 1;
}
.inbld-campaign__arrow:hover {
    background: var(--inbld-green);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.18);
    transform: scale(1.08);
}
.inbld-campaign__arrow:focus-visible {
    outline: 3px solid var(--inbld-green);
    outline-offset: 2px;
}
.inbld-campaign__arrow--prev { right: 48px; }
.inbld-campaign__arrow--next { right: 8px; }

/* ── Karta produktu ──────────────────────────────── */
.inbld-campaign__card {
    background: #fff;
    border: 1px solid #ece9e1;
    border-radius: var(--inbld-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow .22s ease, transform .22s ease;
}
.inbld-campaign__card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.10);
    transform: translateY(-2px);
}
.inbld-campaign__card-img {
    display: block;
    aspect-ratio: 1;
    overflow: hidden;
    background: #f5f5f5;
    position: relative;
    text-decoration: none;
    flex-shrink: 0;
}
.inbld-campaign__card-img img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
    transition: transform .3s ease;
}
.inbld-campaign__card-img:hover img { transform: scale(1.05); }
.inbld-campaign__card-sale {
    position: absolute; top: 8px; left: 8px;
    background: #e74c3c; color: #fff;
    font-size: 9px; font-weight: 800;
    letter-spacing: .08em; padding: 3px 7px;
    border-radius: 4px; z-index: 2;
}
.inbld-campaign__card-body {
    padding: 10px 12px 12px;
    flex: 1; display: flex; flex-direction: column;
}
.inbld-campaign__card-name {
    font-size: 13px; font-weight: 700;
    margin: 0 0 6px; line-height: 1.3;
}
.inbld-campaign__card-name a { color: inherit; text-decoration: none; }
.inbld-campaign__card-name a:hover { color: var(--inbld-green); }
.inbld-campaign__card-foot {
    display: flex; align-items: center;
    justify-content: space-between;
    gap: 8px; flex-wrap: wrap;
    margin-top: auto; padding-top: 8px;
}
.inbld-campaign__card-price {
    font-size: 14px; font-weight: 700; color: var(--inbld-green);
}
.inbld-campaign__card-price del {
    color: #aaa; font-weight: 400; font-size: 12px; margin-right: 3px;
}
.inbld-campaign__card-atc {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; padding: 6px 11px;
    background: var(--inbld-green); color: #fff;
    border-radius: 6px; text-decoration: none;
    transition: background .15s; white-space: nowrap;
}
.inbld-campaign__card-atc:hover { background: #4a8024; color: #fff; }
.inbld-campaign__card-out {
    font-size: 11px; color: #aaa; font-style: italic;
}

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 900px) {
    /* Na tablecie: obraz na górze, produkty poniżej */
    .inbld-campaign {
        grid-template-columns: 1fr;
    }
    .inbld-campaign__image {
        min-height: 260px;
        align-items: flex-end;
    }
    .inbld-campaign__image--center { align-items: flex-end; text-align: left; }
    .inbld-campaign__products {
        padding: 20px 16px 48px;
    }
    .inbld-campaign__arrow--prev { right: 52px; }
    .inbld-campaign__arrow--next { right: 8px; }
}
@media (max-width: 600px) {
    .inbld-campaign__image { min-height: 200px; padding: 20px; }
    .inbld-campaign__heading { font-size: clamp(16px,5vw,24px); }
}