/* ONE PAGE LAYOUT */
html{scroll-behavior:smooth;scroll-padding-top:86px}
body{min-width:0;overflow-x:hidden}
.site-header{position:sticky;top:0;z-index:5000;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:22px;padding:12px clamp(18px,4vw,54px);background:color-mix(in srgb, var(--ui-color-surface) 90%, transparent);border-bottom:1px solid color-mix(in srgb, var(--ui-color-primary) 28%, transparent);backdrop-filter:blur(14px);box-shadow:0 4px 20px rgba(58,48,40,.04)}
.site-header-brand{display:flex;flex-direction:column;gap:1px;color:var(--ui-color-text);text-decoration:none;white-space:nowrap}
.site-header-brand span{font-family:var(--ui-font-heading);font-size:25px;line-height:1;letter-spacing:.13em}
.site-header-brand small{font-family:var(--ui-font-body);font-size:7px;letter-spacing:.16em;color:var(--ui-color-primary-text)}
.site-nav{display:flex;justify-content:center;align-items:center;gap:4px}
.site-nav-link{padding:10px 16px;border:1px solid transparent;border-radius:var(--ui-radius-control);corner-shape:var(--ui-corner-shape);clip-path:var(--ui-clip-control);color:var(--ui-color-text);font:500 .72rem var(--ui-font-body);letter-spacing:.08em;text-decoration:none;transition:.2s ease}
.site-nav-link:hover,.site-nav-link.active{border-color:color-mix(in srgb, var(--ui-color-primary) 40%, transparent);background:color-mix(in srgb, var(--ui-color-surface) 78%, transparent);color:var(--ui-color-primary-text)}
.site-header-actions{display:flex;align-items:center;gap:8px}
.site-cart-link,.site-admin-link{position:relative;width:40px;height:40px;display:grid;place-items:center;border:1px solid color-mix(in srgb, var(--ui-color-primary) 35%, transparent);border-radius:50%;background:color-mix(in srgb, var(--ui-color-surface) 45%, transparent);color:var(--ui-color-primary-text);text-decoration:none;cursor:pointer}
#onepage-cart-count{position:absolute;top:-4px;right:-4px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border-radius:var(--ui-radius-control);corner-shape:var(--ui-corner-shape);clip-path:var(--ui-clip-control);background:var(--ui-color-primary);color:var(--ui-color-on-primary);font:600 9px var(--ui-font-body)}
.site-mobile-toggle{display:none;border:0;background:transparent;color:var(--ui-color-primary-text);font-size:25px;cursor:pointer}
.onepage-main{width:100%}
.onepage-section{scroll-margin-top:86px}
.hero-section{min-height:calc(100vh - 73px);display:flex;align-items:center;justify-content:center;background:linear-gradient(color-mix(in srgb, var(--ui-color-surface) 8%, transparent),color-mix(in srgb, var(--ui-color-surface) 8%, transparent))}
.hero-section .home{min-height:calc(100vh - 73px);width:100%;}
.hero-scroll{display:inline-block;margin-top:28px;color:var(--ui-color-text-muted);text-decoration:none;font:500 .72rem var(--ui-font-body);letter-spacing:.12em;border-bottom:1px solid color-mix(in srgb, var(--ui-color-primary) 50%, transparent);padding-bottom:6px}
.content-section{padding:48px clamp(18px,5vw,72px);background:color-mix(in srgb, var(--ui-color-surface) 30%, transparent)}
.content-section:nth-of-type(odd){background:color-mix(in srgb, var(--ui-color-background) 32%, transparent)}
.section-anchor-title{max-width:1200px;margin:0 auto 34px;text-align:center;color:var(--ui-color-primary-text);font:500 .72rem var(--ui-font-body);letter-spacing:.2em;text-transform:uppercase}
.section-anchor-title:after{content:"";display:block;width:42px;height:1px;background:color-mix(in srgb, var(--ui-color-primary) 60%, transparent);margin:12px auto 0}
.onepage-content-inner,.onepage-offer-inner{max-width:1200px;margin:0 auto}
.site-footer{margin-top:0}
@media(max-width:900px){
 .site-header{grid-template-columns:auto auto;justify-content:space-between;gap:8px;padding:10px 14px}
 .site-header-brand span{font-size:20px}.site-header-brand small{display:none}
 .site-nav{position:absolute;top:100%;left:10px;right:10px;display:none;flex-direction:column;align-items:stretch;padding:8px;background:color-mix(in srgb, var(--ui-color-surface) 97%, transparent);border:1px solid color-mix(in srgb, var(--ui-color-primary) 30%, transparent);border-radius:var(--ui-radius-surface);corner-shape:var(--ui-corner-shape);clip-path:var(--ui-clip-surface);box-shadow:0 14px 35px rgba(58,48,40,.10)}
 .site-nav.open{display:flex}.site-nav-link{text-align:center;padding:12px}
 .site-header-actions{margin-left:auto}.site-mobile-toggle{display:block}.site-header-actions .site-admin-link{display:grid}
 .hero-section,.hero-section .home{min-height:calc(100svh - 61px)}
 .content-section{padding:30px 5px}
}
@media(max-width:480px){
 .site-header-brand span{font-size:17px}.site-cart-link{width:36px;height:36px}.site-mobile-toggle{font-size:22px}.content-section{padding:58px 10px}
}


/* KARTY - tryb aplikacyjny */
.onepage-section.card-hidden{display:none!important}
.onepage-section.card-active{display:block!important}


/* ===== Kontakt karta po przejsciu na układ kart ===== */
.contact-content{
    max-width:760px;
    margin:0 auto;
    padding:32px;
    border:1px solid color-mix(in srgb, var(--ui-color-primary) 25%, transparent);
    border-radius: var(--ui-radius-surface);
    corner-shape: var(--ui-corner-shape);
    clip-path: var(--ui-clip-surface);
    background:color-mix(in srgb, var(--ui-color-surface) 75%, transparent);
}

.contact-content h2{
    font-family:var(--ui-font-heading);
    letter-spacing:.08em;
    margin-bottom:24px;
}

.contact-content form{
    display:flex;
    flex-direction:column;
    gap:14px;
    max-width:520px;
}

.contact-content label{
    font-family:var(--ui-font-body);
    font-size:.8rem;
    letter-spacing:.08em;
}

.contact-content input,
.contact-content textarea{
    width:100%;
    box-sizing:border-box;
    padding:12px 14px;
    border:1px solid color-mix(in srgb, var(--ui-color-primary) 45%, transparent);
    border-radius: var(--ui-radius-control);
    corner-shape: var(--ui-corner-shape);
    clip-path: var(--ui-clip-control);
    background:var(--ui-color-surface);
    color:var(--ui-color-text);
    font-family:var(--ui-font-body);
    font-size:.95rem;
}

.contact-content textarea{
    min-height:130px;
    resize:vertical;
}

.contact-content button{
    align-self:flex-start;
    padding:12px 28px;
    border-radius: var(--ui-radius-control);
    corner-shape: var(--ui-corner-shape);
    clip-path: var(--ui-clip-control);
    border:1px solid color-mix(in srgb, var(--ui-color-primary) 55%, transparent);
    background:transparent;
    cursor:pointer;
    font-family:var(--ui-font-body);
    letter-spacing:.08em;
}

@media(max-width:700px){
    .contact-content{
        padding:20px;
        border-radius: var(--ui-radius-surface);
        corner-shape: var(--ui-corner-shape);
        clip-path: var(--ui-clip-surface);
    }
}

/* final polish */
#kontakt .onepage-content-inner{display:flex;flex-direction:column;align-items:center;text-align:center}
#kontakt .contact-content{width:100%;box-sizing:border-box;text-align:left}
#kontakt .contact-content form{margin-left:auto;margin-right:auto}

/* KARTA KONTAKT - poprawione centrowanie */
#kontakt .onepage-content-inner,
#kontakt .contact-content {
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
}
#kontakt .contact-content > *,
#kontakt .contact-content form {
    margin-left:auto;
    margin-right:auto;
}
#kontakt .contact-content input,
#kontakt .contact-content textarea,
#kontakt .contact-content button {
    text-align:left;
}


/* === Karty - poprawka v5 === */

/* zachowanie tla na trybie kart */
.onepage-section.card-active {
    min-height: auto;
    background:transparent;
}


/* O nas - kontener zgodny z kartami */
#o-nas .onepage-content-inner,
#kontakt .onepage-content-inner {
    width: min(900px, 92vw);
    margin: 0 auto;
    padding: 48px 0;
}


#o-nas .about-content {
    width: min(760px, 100%);
    margin: 0 auto;
    padding: clamp(24px, 4vw, 40px);

    border: 1px solid color-mix(in srgb, var(--ui-color-primary) 28%, transparent);
    border-radius: var(--ui-radius-surface);
    corner-shape: var(--ui-corner-shape);
    clip-path: var(--ui-clip-surface);

    background: color-mix(in srgb, var(--ui-color-surface) 78%, transparent);
    box-shadow: 0 14px 35px rgba(58, 48, 40, 0.08);

    text-align: left;
    line-height: 1.8;

    box-sizing: border-box;
}

/* ==================================================
 *  KONTAKT
 *  ================================================== */

#kontakt .contact-content {
width: min(1000px, 92vw);
max-width: none;
margin: 0 auto;
padding: 42px 48px;
box-sizing: border-box;

background: color-mix(in srgb, var(--ui-color-surface) 78%, transparent);
border: 1px solid color-mix(in srgb, var(--ui-color-primary) 25%, transparent);
border-radius: var(--ui-radius-surface);
corner-shape: var(--ui-corner-shape);
clip-path: var(--ui-clip-surface);
}

#kontakt .contact-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 48px;
align-items: start;
}

/* LEWA KOLUMNA */

#kontakt .contact-info {
min-width: 0;
padding-right: 48px;
border-right: 1px solid color-mix(in srgb, var(--ui-color-primary) 25%, transparent);
}

#kontakt .contact-section-title {
margin: 0 0 22px;
text-align: left;

font-family: var(--ui-font-heading);
font-size: clamp(1.6rem, 2vw, 2rem);
font-weight: 500;
line-height: 1.2;
}
#kontakt .contact-section-title {
margin: 0 0 22px;

color: var(--ui-color-text);
font-family: var(--ui-font-heading);
font-size: clamp(1.6rem, 2vw, 2rem);
font-weight: 500;
line-height: 1.2;
}
#kontakt .contact-intro {
margin-bottom: 32px;
font-family: var(--ui-font-body);
font-size: .95rem;
line-height: 1.7;
color: var(--ui-color-primary-text);
}

#kontakt .contact-details {
display: flex;
flex-direction: column;
gap: 22px;
margin: 0;
line-height: 1.5;
}

#kontakt .contact-item {
display: block;
}

#kontakt .contact-label {
display: flex;
align-items: center;
gap: 9px;
margin-bottom: 5px;
color: var(--ui-color-text);
font-family: var(--ui-font-body);
font-size: .72rem;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
}

#kontakt .contact-icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--ui-color-primary-text);
width: 18px;
height: 18px;

font-size: 15px;
line-height: 1;
}

#kontakt .contact-value {
padding-left: 27px;
text-align: right;

color: var(--ui-color-primary-text);
font-family: var(--ui-font-body);
font-size: .95rem;
line-height: 1.5;
}

#kontakt .contact-value a {
color: var(--ui-color-primary-text);
text-decoration: none;
transition: color .2s ease;
}

#kontakt .contact-value a:hover {
color: var(--ui-color-secondary);
}

/* PRAWA KOLUMNA */

#kontakt .contact-form-section {
min-width: 0;
}

#kontakt .contact-form {
width: 100%;
}

#kontakt .contact-form .form-group {
margin-bottom: 0px;
}

#kontakt .contact-form label {
display: block;
margin-bottom: 9px;
font-family: var(--ui-font-body);
color: var(--ui-color-text);
font-size: .9rem;
font-weight: 500;
line-height: 1.3;
letter-spacing: .07em;
}

#kontakt .contact-form input,
#kontakt .contact-form textarea {
display: block;
width: 100%;
box-sizing: border-box;

border: 1px solid color-mix(
    in srgb,
    var(--ui-color-primary) 45%,
                            transparent
);

border-radius: var(--ui-radius-control);
corner-shape: var(--ui-corner-shape);
clip-path: var(--ui-clip-control);
background: color-mix(in srgb, var(--ui-color-surface) 72%, transparent);

color: var(--ui-color-text);

font-family: var(--ui-font-body);
font-size: .9rem;
line-height: 1.5;

padding: 12px 14px;

outline: none;

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

#kontakt .contact-form input {
min-height: 46px;
}

#kontakt .contact-form textarea {
min-height: 130px;
resize: none;
overflow-y: hidden;
}

#kontakt .contact-form input:focus,
#kontakt .contact-form textarea:focus {
border-color: var(--ui-color-primary);
box-shadow: 0 0 0 3px color-mix(
    in srgb,
    var(--ui-color-primary) 10%,
                                transparent
);
}

#kontakt .contact-submit {
display: block;
margin: 28px auto 0;
padding: 12px 28px;
border: 1px solid color-mix(in srgb, var(--ui-color-primary) 55%, transparent);
border-radius: var(--ui-radius-control);
corner-shape: var(--ui-corner-shape);
clip-path: var(--ui-clip-control);
border-color: var(--ui-color-primary);
background: color-mix(in srgb, var(--ui-color-surface) 90%, transparent);
color: var(--ui-color-text);
font-family: var(--ui-font-body);
font-size: .82rem;
font-weight: 500;
letter-spacing: .06em;
cursor: pointer;
transition:
background .2s ease,
border-color .2s ease,
color .2s ease,
transform .2s ease;
}

#kontakt .contact-submit:hover {
background: var(--ui-color-primary);
border-color: var(--ui-color-primary);
color: var(--ui-color-background);
}

#kontakt .contact-submit:active {
transform: translateY(1px);
}
/* ==================================================
 *  MOBILNA NAWIGACJA PŁYWAJĄCA
 *  ================================================== */

.mobile-floating-nav {
    display: none;
}

@media (max-width: 768px) {

    .mobile-floating-nav {
        position: fixed;
        left: 12px;
        right: 12px;
        bottom: calc(12px + env(safe-area-inset-bottom));
        z-index: 1000;

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

        min-height: 58px;
        padding: 6px;

        background: color-mix(in srgb, var(--ui-color-surface) 94%, transparent);
        border: 1px solid color-mix(in srgb, var(--ui-color-primary) 35%, transparent);
        border-radius: var(--ui-radius-surface);
        corner-shape: var(--ui-corner-shape);
        clip-path: var(--ui-clip-surface);

        box-shadow: 0 12px 35px rgba(58, 48, 40, 0.16);

        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
    }

    .mobile-floating-nav-link,
    .mobile-floating-nav-cart,
    .mobile-floating-nav-settings {
        width: 42px;
        height: 42px;

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

        flex: 0 0 42px;

        border: 0;
        border-radius: var(--ui-radius-control);
        corner-shape: var(--ui-corner-shape);
        clip-path: var(--ui-clip-control);
        background: transparent;

        color: var(--ui-color-text);
        font-size: 20px;
        line-height: 1;

        text-decoration: none;
        cursor: pointer;

        transition:
        background 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
    }

    .mobile-floating-nav-link:active,
    .mobile-floating-nav-cart:active,
    .mobile-floating-nav-settings:active {
        transform: scale(0.92);
    }

    .mobile-floating-nav-link.active {
        background: color-mix(in srgb, var(--ui-color-primary) 16%, transparent);
        color: var(--ui-color-primary-text);
    }

    .mobile-floating-nav-cart,
    .mobile-floating-nav-settings {
        color: var(--ui-color-text);
    }

    .onepage-main {
        padding-bottom: calc(
            100px + env(safe-area-inset-bottom)
        );
    }
    .site-header-actions,
.site-mobile-toggle {
    display: none;
}

.site-header {
    justify-content: center;
}

.site-header-brand {
    text-align: center;
}
.site-header-actions,
.site-mobile-toggle {
    display: none;
}

.site-header {
    justify-content: center;
}

.site-header-brand {
    text-align: center;
}
}


/* ==================================================
 *  IKONY MOBILNEJ NAWIGACJI
 *  ================================================== */

.mobile-floating-nav-link svg,
.mobile-floating-nav-cart svg,
.mobile-floating-nav-settings svg {
    width: 21px;
    height: 21px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
}
/* ==================================================
 *  KONTAKT - MOBILE
 *  ================================================== */

@media (max-width: 768px) {

    #kontakt .contact-content {
    padding: 24px 18px;
    border-radius: var(--ui-radius-surface);
    corner-shape: var(--ui-corner-shape);
    clip-path: var(--ui-clip-surface);
    }


    #kontakt .contact-layout {
    grid-template-columns: 1fr;
    gap: 35px;
    }


    #kontakt .contact-info {
    padding-right: 0;
    padding-bottom: 30px;

    border-right: none;
    border-bottom: 1px solid color-mix(in srgb, var(--ui-color-primary) 25%, transparent);
    }


    #kontakt .contact-section-title {
    text-align: center;
    }


    #kontakt .contact-intro {
    text-align: center;
    }


    #kontakt .contact-details {
    gap: 18px;
    }


    #kontakt .contact-form-section {
    width: 100%;
    }


    #kontakt .contact-form input,
    #kontakt .contact-form textarea {
    width: 100%;
    }

}
.floating-query-button{

    display:none;

    position:fixed;

    right:24px;

    bottom:90px;

    width:68px;

    height:68px;

    border-radius:50%;

    border:1px solid color-mix(in srgb, var(--ui-color-surface) 80%, transparent);

    background:
    linear-gradient(
        145deg,
        color-mix(in srgb, var(--ui-color-primary) 80%, #FFFFFF),
        var(--ui-color-primary)
    );

    color:var(--ui-color-on-primary);

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

    cursor:pointer;

    z-index:900;

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


.query-icon{

    width:38px;

    height:38px;

}


#floating-query-count{

position:absolute;


top:-4px;

right:-4px;


width:24px;

height:24px;


border-radius:50%;


background:var(--ui-color-surface);


color:var(--ui-color-primary-text);


display:flex;

align-items:center;

justify-content:center;


font-size:13px;

font-weight:bold;

}
@media(min-width:901px){

    #onepage-cart-button{

    display:none;

    }

}

/* ===== Nagłówek: menu na środku strony (niezależnie od długości nazwy firmy) ===== */
@media (min-width: 901px) {
    .site-header { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
    .site-header-brand { justify-self: start; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
    .site-header-actions { justify-self: end; }
}