:root {
    --layout-viewport-desktop: 1440px;
    --layout-margin-desktop: 40px;
    --layout-gutter-desktop: 20px;
    --layout-columns-desktop: 12;
    --layout-section-padding-y-desktop: 100px;
    --layout-card-gap-desktop: 20px;
    --layout-section-padding-y-lg-desktop: 120px;
    --layout-section-padding-y-sm-desktop: 56px;
    --layout-header-height-desktop: 88px;

    --layout-viewport-mobile: 390px;
    --layout-margin-mobile: 20px;
    --layout-gutter-mobile: 16px;
    --layout-columns-mobile: 4;
    --layout-section-padding-y-mobile: 48px;
    --layout-card-gap-mobile: 16px;
    --layout-section-padding-y-lg-mobile: 56px;
    --layout-section-padding-y-sm-mobile: 32px;
    --layout-header-height-mobile: 64px;

    --space-none: 0px;
    --space-2xs: 2px;
    --space-xs: 4px;
    --space-xs-plus: 6px;
    --space-sm: 8px;
    --space-sm-plus: 10px;
    --space-ms: 12px;
    --space-ms-plus: 14px;
    --space-md: 16px;
    --space-gap: 20px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 40px;
    --space-2xl-plus: 48px;
    --space-3xl: 56px;
    --space-4xl: 100px;
    --space-5xl: 120px;

    --radius-none: 0px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 1000px;

    --stroke-none: 0px;
    --stroke-hairline: 1px;
    --stroke-thin: 1.5px;
    --stroke-icon: 1.75px;
    --stroke-thick: 2px;

    --color-green-10: #F9FDEC;
    --color-green-20: #F3FDD8;
    --color-green-40: #E7FEA9;
    --color-green-100: #BCF425;
    --color-green-120: #AEEB0A;
    --color-green-140: #9AD105;
    --color-green-160: #5E8100;
    --color-green-200: #304200;

    --color-neutral-00: #FFFFFF;
    --color-neutral-05: #F4F9F9;
    --color-neutral-10: #E9EEEE;
    --color-neutral-20: #D6DEDE;
    --color-neutral-40: #AAB5B5;
    --color-neutral-60: #788585;
    --color-neutral-80: #4C5959;
    --color-neutral-90: #353B3B;
    --color-neutral-100: #1A1B1B;

    --color-red-100: #FF3B25;

    --color-status-success: #2E7D32;
    --color-status-success-bg: #E8F3E9;
    --color-status-warning: #A85F00;
    --color-status-warning-strong: #7A4500;
    --color-status-warning-bg: #FBF0E0;
    --color-status-error: #C62828;
    --color-status-error-bg: #FBE9E9;
    --color-status-error-on-dark: #FF8A80;
    --color-status-info: #1B6B88;
    --color-status-info-bg: #D5E5F4;

    --color-brand-primary: var(--color-green-100);
    --color-brand-primary-hover: var(--color-green-120);
    --color-brand-primary-active: var(--color-green-140);
    --color-brand-primary-soft: var(--color-green-40);
    --color-brand-primary-subtle: var(--color-green-20);
    --color-brand-on-primary: var(--color-neutral-100);
    --color-brand-text: var(--color-green-160);
    --color-brand-text-strong: var(--color-green-200);
    --color-brand-text-on-dark: var(--color-green-100);
    --color-brand-promo: var(--color-red-100);
    --color-brand-on-promo: var(--color-neutral-00);

    --color-text-primary: var(--color-neutral-100);
    --color-text-muted: var(--color-neutral-80);
    --color-text-secondary: var(--color-neutral-60);
    --color-text-label: var(--color-neutral-60);
    --color-text-disabled: var(--color-neutral-40);
    --color-text-inverse: var(--color-neutral-00);

    --color-bg-default: var(--color-neutral-00);
    --color-bg-subtle: var(--color-neutral-05);
    --color-bg-muted: var(--color-neutral-10);
    --color-bg-strong: var(--color-neutral-20);
    --color-bg-hover: var(--color-neutral-05);
    --color-bg-disabled: var(--color-neutral-10);
    --color-bg-mid: var(--color-neutral-40);
    --color-bg-mid-dark: var(--color-neutral-60);
    --color-bg-dark-subtle: var(--color-neutral-80);
    --color-bg-dark: var(--color-neutral-90);
    --color-bg-inverse: var(--color-neutral-100);
    --color-bg-brand: var(--color-green-100);
    --color-bg-brand-subtle: var(--color-green-10);
    --color-bg-scrim: rgba(26, 27, 27, 0.8);

    --color-border-subtle: var(--color-neutral-10);
    --color-border-default: var(--color-neutral-20);
    --color-border-input: var(--color-neutral-40);
    --color-border-strong: var(--color-neutral-40);
    --color-border-inverse: var(--color-neutral-100);
    --color-border-brand: var(--color-green-100);
    --color-border-brand-subtle: var(--color-green-40);
    --color-border-focus: var(--color-status-info);
    --color-border-error: var(--color-status-error);
    --color-border-on-dark-subtle: var(--color-status-warning-strong);
    --color-border-on-dark: var(--color-neutral-80);
    --color-border-on-dark-strong: var(--color-neutral-00);

    --color-icon-default: var(--color-neutral-100);
    --color-icon-muted: var(--color-neutral-80);
    --color-icon-secondary: var(--color-neutral-60);
    --color-icon-inverse: var(--color-neutral-00);
    --color-icon-brand: var(--color-green-100);

    --color-status-token-success: var(--color-status-success);
    --color-status-token-success-bg: var(--color-status-success-bg);
    --color-status-token-warning: var(--color-status-warning);
    --color-status-token-warning-strong: var(--color-status-warning-strong);
    --color-status-token-warning-bg: var(--color-status-warning-bg);
    --color-status-token-error: var(--color-status-error);
    --color-status-token-error-bg: var(--color-status-error-bg);
    --color-status-token-error-on-dark: var(--color-status-error-on-dark);
    --color-status-token-info: var(--color-status-info);
    --color-status-token-info-bg: var(--color-status-info-bg);

    --color-overlay-dark-0: rgba(26, 27, 27, 0);
    --color-overlay-dark-10: rgba(26, 27, 27, 0.1);
    --color-overlay-dark-20: rgba(26, 27, 27, 0.2);
    --color-overlay-dark-30: rgba(26, 27, 27, 0.3);
    --color-overlay-dark-60: rgba(26, 27, 27, 0.6);
    --color-overlay-dark-90: rgba(26, 27, 27, 0.9);
    --color-overlay-light-0: rgba(255, 255, 255, 0);
    --color-overlay-light-33: rgba(255, 255, 255, 0.33);
    --color-overlay-light-80: rgba(255, 255, 255, 0.8);

    --color-glass-light-track: rgba(255, 255, 255, 0.16);
    --color-glass-light-border: rgba(255, 255, 255, 0.24);
    --color-glass-light-circle: rgba(255, 255, 255, 0.75);
    --color-glass-light-circle-hover: rgba(255, 255, 255, 0.90);
    --color-glass-dark-track: rgba(26, 27, 27, 0.16);
    --color-glass-dark-border: rgba(26, 27, 27, 0.12);
    --color-glass-dark-circle: rgba(26, 27, 27, 0.16);
    --color-glass-dark-circle-hover: rgba(26, 27, 27, 0.28);
    --color-glass-header-tint: rgba(255, 255, 255, 0.01);

    --font-family-sans: 'Plus Jakarta Sans', sans-serif;
    --font-weight-extralight: 200;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    --text-case-original: none;
    --text-case-overline: uppercase;

    /* Desktop: headings */
    --font-display-xl: var(--font-weight-extralight) 128px/128px var(--font-family-sans);
    --tracking-display-xl: -0.3px;

    --font-display: var(--font-weight-light) 60px/70px var(--font-family-sans);
    --tracking-display: -1px;

    --font-display-hero: var(--font-weight-light) 60px/76px var(--font-family-sans);
    --tracking-display-hero: -1px;

    --font-display-l: var(--font-weight-light) 48px/48px var(--font-family-sans);
    --tracking-display-l: -1px;

    --font-h1: var(--font-weight-regular) 50px/64px var(--font-family-sans);
    --tracking-h1: -1px;

    --font-h2: var(--font-weight-medium) 40px/50px var(--font-family-sans);
    --tracking-h2: -0.8px;

    --font-h3: var(--font-weight-medium) 34px/40px var(--font-family-sans);
    --tracking-h3: -0.5px;

    --font-h4: var(--font-weight-medium) 26px/32px var(--font-family-sans);
    --tracking-h4: -0.3px;

    --font-h5: var(--font-weight-medium) 20px/26px var(--font-family-sans);
    --tracking-h5: 0px;

    --font-h6: var(--font-weight-semibold) 16px/22px var(--font-family-sans);
    --tracking-h6: 0px;

    /* Desktop: body */
    --font-body-large: var(--font-weight-medium) 16px/26px var(--font-family-sans);
    --tracking-body-large: 0px;

    --font-body: var(--font-weight-medium) 14px/22px var(--font-family-sans);
    --tracking-body: 0px;

    --font-body-bold: var(--font-weight-bold) 14px/22px var(--font-family-sans);
    --tracking-body-bold: 0px;

    --font-body-small: var(--font-weight-medium) 12px/18px var(--font-family-sans);
    --tracking-body-small: 0px;

    --font-body-small-bold: var(--font-weight-bold) 12px/18px var(--font-family-sans);
    --tracking-body-small-bold: 0px;

    --font-caption: var(--font-weight-medium) 11px/16px var(--font-family-sans);
    --tracking-caption: 0px;

    --font-caption-bold: var(--font-weight-bold) 11px/16px var(--font-family-sans);
    --tracking-caption-bold: 0px;

    /* Desktop: overlines */
    --font-overline-big: var(--font-weight-bold) 12px/16px var(--font-family-sans);
    --tracking-overline-big: 1px;

    --font-overline: var(--font-weight-bold) 10px/14px var(--font-family-sans);
    --tracking-overline: 1.2px;

    /* Desktop: interface and specialty */
    --font-button: var(--font-weight-medium) 14px/20px var(--font-family-sans);
    --tracking-button: 0px;

    --font-button-small: var(--font-weight-semibold) 11px/16px var(--font-family-sans);
    --tracking-button-small: 0px;

    --font-input: var(--font-weight-medium) 14px/22px var(--font-family-sans);
    --tracking-input: 0px;

    --font-label: var(--font-weight-medium) 14px/22px var(--font-family-sans);
    --tracking-label: 0px;

    --font-badge-compact: var(--font-weight-bold) 10px/14px var(--font-family-sans);
    --tracking-badge-compact: 0.4px;

    --font-spec: var(--font-weight-light) 20px/26px var(--font-family-sans);
    --tracking-spec: 1px;
}

/* adjust to your application's layout. */
@media (width < 768px) {
    :root {
        --font-display-xl: var(--font-weight-extralight) 72px/72px var(--font-family-sans);

        --font-display: var(--font-weight-light) 34px/40px var(--font-family-sans);
        --tracking-display: -0.6px;

        --font-display-hero: var(--font-weight-light) 34px/40px var(--font-family-sans);
        --tracking-display-hero: -0.6px;

        --font-display-l: var(--font-weight-light) 28px/28px var(--font-family-sans);

        --font-h1: var(--font-weight-medium) 30px/38px var(--font-family-sans);
        --tracking-h1: -0.4px;

        --font-h2: var(--font-weight-medium) 26px/32px var(--font-family-sans);
        --tracking-h2: -0.4px;

        --font-h3: var(--font-weight-medium) 23px/30px var(--font-family-sans);
        --tracking-h3: -0.3px;

        --font-h4: var(--font-weight-medium) 21px/28px var(--font-family-sans);
        --tracking-h4: -0.2px;

        --font-h5: var(--font-weight-medium) 19px/26px var(--font-family-sans);
        --font-h6: var(--font-weight-semibold) 17px/24px var(--font-family-sans);

        --font-body-large: var(--font-weight-medium) 16px/24px var(--font-family-sans);
        --font-body-small: var(--font-weight-medium) 13px/18px var(--font-family-sans);
        --font-body-small-bold: var(--font-weight-bold) 13px/18px var(--font-family-sans);

        --font-caption: var(--font-weight-medium) 12px/18px var(--font-family-sans);
        --font-caption-bold: var(--font-weight-bold) 12px/18px var(--font-family-sans);

        --font-overline: var(--font-weight-bold) 11px/16px var(--font-family-sans);

        --font-button: var(--font-weight-medium) 15px/20px var(--font-family-sans);
        --font-button-small: var(--font-weight-semibold) 13px/18px var(--font-family-sans);

        --font-input: var(--font-weight-medium) 16px/24px var(--font-family-sans);
        --font-label: var(--font-weight-medium) 12px/18px var(--font-family-sans);

        --font-spec: var(--font-weight-light) 18px/24px var(--font-family-sans);
    }

    --shadow-okno: 0 16px 48px rgba(26, 27, 27, 0.25);
    --shadow-pasek-zaznaczenia: 0 8px 24px rgba(26, 27, 27, 0.25);
    --shadow-menu: 0 12px 24px rgba(15, 23, 23, 0.14);
    --shadow-menu-2: 0 8px 24px -4px rgba(26, 27, 27, 0.12);
    --shadow-menu-3: 0 8px 24px rgba(26, 27, 27, 0.12);
    --shadow-indeks-slidera: 0 1px 6px rgba(26, 27, 27, 0.50);
}

@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('./PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
    font-weight: 200 800;
    font-style: normal;
    font-display: swap;
}

body {
    font-family: var(--font-family-sans), sans-serif;
}

/* layout */
.container {
    padding-inline: var(--layout-margin-mobile) !important;
}

@media (min-width: 1200px) {
    .container {
        width: 1440px;
        max-width: 100%;
        padding-inline: var(--layout-margin-desktop) !important;
    }
}

@media (min-width: 992px) {
    .carousel .carousel-indicators {
        display: flex;
        flex-direction: column;
        width: fit-content;
        height: fit-content;
        gap: var(--space-gap);
        position: absolute;
        left: auto;
        right: 50px;
        top: 50%;
        transform: translateY(-50%);
    }

    .carousel-indicators li {
        gap: var(--space-ms);
    }

    .carousel-indicators {
        display: block;
    }

    .carousel-indicators li::before {
        display: block !important;
    }

    .carousel-indicators li::after {
        width: 24px !important;
        height: 2px !important;
        background-color: var(--color-text-inverse) !important;
    }

    .carousel-indicators li.active::after {
        height: 2px !important;
        width: 48px !important;
        min-width: 48px !important;
        background-color: var(--color-brand-primary) !important;
    }
}

@media (max-width: 992px) {
    .section-margin-md-down {
        padding-inline: var(--layout-margin-mobile);
    }
}

@media (min-width:768px) {
    .pl-5xl-sm-up {
        padding-left: var(--space-5xl) !important;
    }

    .img-choose {
        height: 100% !important;
        position: absolute !important;
        object-fit: cover;
        object-position: 100% -5%;
        transform: scale(1.35);
        transform-origin: right center;
    }

    .choose-container {
        height: 736px;
        display: flex;
        align-items: center;
        width: 100%;
    }

    .choose-container > .row {
        width: 100%;
        margin: 0;
    }

    .flex-1-sm-up {
        flex: 1;
    }
}

.absolute {
    position: absolute;
}

.relative {
    position: relative;
}

@media (max-width: 780px) {
    .map-floating-box {
        width: calc((100% - 16px) - var(--layout-margin-mobile));
    }
    .mt-xl-sm-down {
        margin-top: var(--space-xl);
    }
    .nav-menu-no-radius {
        border-top-right-radius: 0 !important;
        border-bottom-right-radius: 0 !important;
    }
}

@media (max-width: 767px) {
    .justify-center-sm-down {
        justify-content: center;
    }
}

@media (max-width: 991px) {
    .carousel-indicators .active {
        width: auto;
    }
}

.d-flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.flex-1 {
    flex: 1;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.d-grid {
    display: grid;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.w-max {
    width: max-content;
}

@media (min-width: 767px) {
    .h-100-sm-up {
        height: 100%;
    }
}

/* radius */
.rounded-sm {
    border-radius: var(--radius-sm);
}

.rounded-md {
    border-radius: var(--radius-md);
}

.rounded-lg {
    border-radius: var(--radius-lg);
}

.rounded-xl {
    border-radius: var(--radius-xl);
}

.rounded-full {
    border-radius: 1000px;
}

/* buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    padding-inline: var(--space-lg);
    border-radius: var(--radius-md);
    min-height: 44px;
    text-transform: unset;
    font: var(--font-button);
}

.btn-ghost {
    background-color: transparent;
    border: none;
    padding: 0;
    min-height: 0;
    min-width: 0;
}

.btn-large {
    padding-inline: var(--space-xl) !important;
    min-height: 56px !important;
}

.btn-small {
    min-height: 36px !important;
}

.btn-primary {
    background-color: var(--color-bg-inverse);
    color: var(--color-text-inverse) !important;
}

.btn-primary:hover {
    background-color: var(--color-brand-primary) !important;
    color: var(--color-text-primary) !important;
}

.btn-secondary {
    background-color: var(--color-brand-primary);
    color: var(--color-text-primary);
}

.btn-secondary:hover {
    background-color: var(--color-brand-primary-hover) !important;
    color: var(--color-text-primary) !important;
}

.btn-outline {
    background-color: transparent;
    color: var(--color-text-primary);
    border: var(--stroke-thin) solid var(--color-border-inverse);
}

.btn-outline:hover {
     color: var(--color-brand-text);
     border-color: var(--color-brand-text);
 }

.btn-outline-light {
    background-color: transparent;
    color: var(--color-text-inverse);
    border: var(--stroke-thin) solid var(--color-glass-light-border);
}

.btn-icon-small {
    min-width: 36px !important;
    min-height: 36px !important;
    padding: unset;
}

.btn-icon-primary {
    min-width: 48px;
    min-height: 48px;
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-inverse);
    color: var(--color-text-primary);
    background: none;
}

.btn-icon-primary:hover {
    color: var(--color-brand-text);
    border: 1px solid var(--color-brand-text);
}

.btn-icon-light {
    min-width: 48px;
    min-height: 48px;
    border-radius: var(--radius-lg);
    background: var(--color-bg-default);
}

.btn-outline-light:hover {
    color: var(--color-brand-primary);
    border-color: var(--color-brand-primary);
}

.btn-flip-text {
    display: block;
    position: relative;
    transition: transform 0.325s cubic-bezier(0.66, 0, 0.34, 1);
}

.btn-flip-text::after {
    content: attr(data-text) !important; /* pokaże ten sam tekst */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    text-align: center;
}

.btn:hover .btn-flip-text {
    transform: translateY(-100%);
}

.btn-flip-svg {
    display: grid;
    transform: translateY(30%);
    transition: transform 0.325s cubic-bezier(0.66, 0, 0.34, 1);
}

.btn-flip-svg .icon:last-child {

    transition: transform 0.325s cubic-bezier(0.66, 0, 0.34, 1);
}

.btn:hover .btn-flip-svg {
    transform: translateY(-30%);
}

/* links */
.link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-primary) !important;
    padding-inline: 0 !important;
}

.link:hover {
    color: var(--color-brand-text) !important;
}

.link-light {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-text-inverse) !important;
    padding-inline: 0 !important;
}

.link-light:hover {
    color: var(--color-brand-primary) !important;
}

@media (min-width: 576px) {
    .link-light-xs-up {
        display: inline-flex;
        align-items: center;
        gap: var(--space-sm);
        color: var(--color-text-inverse) !important;
        padding-inline: 0 !important;
    }

    .link-light-xs-up:hover {
        color: var(--color-brand-primary) !important;
    }
}

@media (max-width: 576px) {
    .btn-outline-light-xs-down {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
        color: var(--color-text-inverse) !important;
        border: var(--stroke-thin) solid var(--color-glass-light-border);
        padding-inline: var(--space-lg);
        border-radius: var(--radius-md);
        min-height: 44px;
        text-transform: unset;
        font: var(--font-button);
    }

    .btn-outline-light-xs-down:hover {
        color: var(--color-brand-primary);
        border-color: var(--color-brand-primary);
    }
}


/* colors */
.bg-default {
    background-color: var(--color-bg-default);
}

.bg-brand-primary {
    background-color: var(--color-bg-brand);
}

.bg-brand-primary-soft {
    background-color: var(--color-bg-brand);
}

.bg-brand-primary-soft {
    background-color: var(--color-brand-primary-soft);
}

.bg-brand-primary-subtle {
    background-color: var(--color-brand-primary-subtle);
}

.bg-subtle {
    background-color: var(--color-bg-subtle);
}

.bg-dark-subtle {
    background-color: var(--color-bg-dark-subtle);
}

.bg-strong {
    background-color: var(--color-bg-strong);
}

.bg-inverse {
    background-color: var(--color-bg-inverse) !important;
}

.text-error {
    color: var(--color-status-error) !important;
}

.text-primary {
    color: var(--color-text-primary) !important;
}

.text-inverse {
    color: var(--color-text-inverse) !important;
}

.text-muted {
    color: var(--color-text-muted) !important;
}

.text-disabled {
    color: var(--color-text-disabled) !important;
}

.text-brand-on-dark {
    color: var(--color-brand-text-on-dark);
}

.text-brand-primary {
    color: var(--color-brand-primary);
}

.text-brand {
    color: var(--color-brand-text);
}

.text-secondary {
    color: var(--color-text-secondary);
}

/* borders */
.border-default {
    border: 1px solid var(--color-border-default);
}

.border-strong {
    border: 1px solid var(--color-border-strong);
}

.border-subtle {
    border: 1px solid var(--color-border-subtle);
}

.border-t-subtle {
    border-top: 1px solid var(--color-border-subtle);
}

.border-t-default {
    border-top: 1px solid var(--color-border-default);
}

.border-t-strong {
    border-top: 1px solid var(--color-border-strong);
}

/* spacing */
.p-xs {
    padding: var(--space-xs);
}

.p-ms {
    padding: var(--space-ms);
}

.p-sm {
    padding: var(--space-sm);
}

.p-sm-plus {
    padding: var(--space-sm-plus);
}

.p-md {
    padding: var(--space-md);
}

.p-lg {
    padding: var(--space-lg);
}

.p-xl {
    padding: var(--space-xl);
}

.p-2xl {
    padding: var(--space-2xl);
}

.pt-lg {
    padding-top: var(--space-lg);
}

.pt-xl {
    padding-top: var(--space-xl);
}

.pb-5xl {
    padding-bottom: var(--space-5xl);
}

.px-ms {
    padding-inline: var(--space-ms);
}

.px-md {
    padding-inline: var(--space-md);
}

.py-xs {
    padding-block: var(--space-xs);
}

.py-gap {
    padding-block: var(--space-gap);
}

.py-2xl {
    padding-block: var(--space-2xl);
}

.section-pt {
    padding-top: var(--layout-section-padding-y-desktop);
}

.section-py {
    padding-block: var(--layout-section-padding-y-desktop);
}

.section-py-lg {
    padding-block: var(--layout-section-padding-y-lg-desktop);
}

.mt-xs {
    margin-top: var(--space-xs);
}

.mt-sm {
    margin-top: var(--space-sm);
}

.mt-md {
    margin-top: var(--space-md);
}

.mt-lg {
    margin-top: var(--space-lg);
}

.mt-gap {
    margin-top: var(--space-gap);
}

.mt-xl {
    margin-top: var(--space-xl);
}

.mt-3xl {
    margin-top: var(--space-3xl);
}

.mt-2xl {
    margin-top: var(--space-2xl);
}

.gap-xs {
    gap: var(--space-xs);
}

.gap-ms {
    gap: var(--space-ms);
}

.gap-sm {
    gap: var(--space-sm);
}

.gap-md {
    gap: var(--space-md);
}

.gap {
    gap: var(--space-gap);
}

.gap-lg {
    gap: var(--space-lg);
}

.gap-xl {
    gap: var(--space-xl);
}

.gap-2xl {
    gap: var(--space-2xl);
}

.gap-3xl {
    gap: var(--space-3xl);
}

.w-auto {
    width: auto;
}

/* text */
.text-display-hero {
    font: var(--font-display-hero);
    letter-spacing: var(--tracking-display-hero);
}

.text-display-l {
    font: var(--font-display-l);
    letter-spacing: var(--tracking-display-l);
}

.text-display-xl {
    font: var(--font-display-xl);
    letter-spacing: var(--tracking-display-xl);
}

.text-h1 {
    font: var(--font-h1);
}

.text-h2 {
    font: var(--font-h2);
    letter-spacing: var(--tracking-h2);
}

.text-h3 {
    font: var(--font-h3);
}

.text-h4 {
    font: var(--font-h4);
}

.text-h5 {
    font: var(--font-h5);
}

.text-h6 {
    font: var(--font-h6);
}

.text-body {
    font: var(--font-body);
    letter-spacing: var(--tracking-body);
}

.text-body-small {
    font: var(--font-body-small);
}

.text-body-small-bold {
    font: var(--font-body-small-bold);
}

.text-body-bold {
    font: var(--font-body-bold);
}

.text-body-large {
    font: var(--font-body-large);
    letter-spacing: var(--tracking-body-large);
}

.text-overline {
    font: var(--font-overline);
    letter-spacing: var(--tracking-overline);
}

.text-overline-big {
    font: var(--font-overline-big);
    letter-spacing: var(--tracking-overline-big);
}

.text-caption {
    font: var(--font-caption);
    letter-spacing: var(--tracking-caption);
}

.text-caption-bold {
    font: var(--font-caption-bold);
    letter-spacing: var(--tracking-caption-bold);
}

.text-label {
    font: var(--font-label);
    color: var(--color-text-label);
}

.text-spec {
    font: var(--font-spec);
    letter-spacing: var(--font-spec);
}

/* product-miniature */
.product-badges {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: start;
    margin-bottom: .5rem;
}

.product-badge {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    font: var(--font-overline);
}

.product-badge--category {
    background-color: var(--color-bg-inverse);
    color: var(--color-text-inverse);
}

.product-badge--spec {
    background-color: var(--color-brand-primary);
    color: var(--color-text-primary);
}

.product-badge--date {
    background-color: #3A3A3C;
    color: #CCCDD0;
}

/*not matching style so it's separate*/
.promo-badge {
    background-color: var(--color-brand-promo);
    color: var(--color-brand-on-promo);
    border-radius: var(--radius-full);
    width: 50px;
    height: 50px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 10;
    display: grid;
    place-items: center;
}

/* categories tabs */
.home-category-link {
    position: relative;
    border: var(--stroke-thin) solid var(--color-border-strong);
    background-color: var(--color-bg-default);
    color: var(--color-text-primary);
    text-decoration: none;
}

.category-checkbox {
    position: relative;
    border-width: var(--stroke-thin);
    text-decoration: none;
}

.pill {
    position: relative;
    text-decoration: none;
    text-transform: uppercase;
    font: var(--font-overline-big);
    gap: var(--space-sm);
}

.pill.active {
    background-color: var(--color-bg-inverse);
    color: var(--color-text-inverse) !important;
}

.pill.active > .pill-icon {
    color: var(--color-brand-primary) !important;
}

.category-checkbox-input {
    display: none;
}

.category-checkbox-label, .home-category-label {
    color: var(--color-text-primary);
}

.home-category-icon img {
    display: block;
}

.home-category-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    color: var(--color-brand-primary);
    opacity: 0;
}

.category-checkbox:has(.category-checkbox-input:checked),
.home-category-link .active,
.home-category-link:hover {
    background-color: var(--color-bg-inverse);
    border-color: var(--color-bg-inverse);
}

.category-checkbox:has(.category-checkbox-input:checked), .home-category-link:hover .home-category-label {
    color: var(--color-text-inverse);
}

.home-category-link:hover .home-category-icon img {
    filter: brightness(0) saturate(100%)
    invert(85%) sepia(91%) saturate(715%)
    hue-rotate(22deg) brightness(103%) contrast(102%);
}

.home-category-link:hover .home-category-arrow {
    opacity: 1;
}

@keyframes category-text-in {
    from {
        transform: translateX(-6px);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes category-arrow-in {
    from {
        opacity: 0;
        transform: translateX(6px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.home-category-link:hover .home-category-label {
    color: var(--color-text-inverse);
    animation: category-text-in 200ms ease-out both;
}

.home-category-link:hover .home-category-arrow {
    opacity: 1;
    animation: category-arrow-in 200ms ease-out both;
}

/* */
.list-style-none {
    list-style: none !important;
    position: relative;
}

.toc-item {
    display: flex;
    align-items: center;
    padding-left: 10px;
    gap: var(--space-sm-plus);
}

.toc-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 18px;
    background-color: var(--color-brand-primary);
    border-radius: var(--radius-full);
}

/* separators */
.divide > *:first-child {
    border-top: 1px solid #CCCDD0;
}

.divide > * {
    border-bottom: 1px solid #CCCDD0;
}

.divide-between > *:not(:first-child) {
    border-top: 1px solid #CCCDD0;
}

.divide-x > *:not(:last-child) {
    border-right: 1px solid #CCCDD0;
}

/* helpers */
svg {
    display: block;
}

.row-no-clear::after {
    clear: initial !important;
}

.from-error:has(p:empty) {
    display: none;
}

.overflow-y-clip {
    overflow-y: clip;
}

.grid-cols {
    grid-template-columns: 2fr 1fr;
    max-width: 1440px;
}

.flex-columns {
    display: flex;
    flex-wrap: wrap;
}

.flex-grow-1 {
    flex-grow: 1;
    min-width: 0;
}

@media (max-width: 576px) {
    .flex-columns-xs-down {
        flex-direction: column;
    }

    .flex-columns-xs-down > * {
        width: 100%;
    }
}

@media (max-width: 767px) {
    .flex-columns-sm-down {
        flex-direction: column;
    }

    .flex-columns-sm-down > * {
        width: 100%;
    }

    .flex-col-sm-down {
        flex-direction: column;
    }

    .flex-col-sm-down > * {
        width: 100%;
    }
}

@media (max-width: 992px) {
    .flex-columns-md-down {
        flex-direction: column;
    }

    .flex-columns-md-down > * {
        width: 100%;
        max-width: 100% !important;
    }
}

/* dialog */

.dialog {
}


.dialog__overlay {
    position: fixed;
    inset: 0;
    /*width: 100vw;*/
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, 0.35);
    display: none;
    justify-content: end;
    z-index: 999;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


.dialog--open .dialog__overlay {
    display: flex
}

.dialog__content {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(2, 6, 23, 0.12);
    max-width: 480px;
    width: 100%;
    max-height: calc(100vh);
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}

.dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem
}

.dialog__title {
    font-size: 1.125rem;
    font-weight: 700
}

.dialog__close {
    background: transparent;
    border: 0;
    font-size: 1rem;
    cursor: pointer;
    padding: .25rem .5rem;
    border-radius: 8px
}

.dialog__close:focus {
    outline: 3px solid rgba(0, 0, 0, .08)
}

.dialog__body {
    color: #6b7280;
    line-height: 1.45;
    padding-top: .25rem
}

.dialog__footer {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    padding-top: .25rem
}

/* Small screens tweak */
@media (max-width: 420px) {
    .dialog__content.container {
        padding: .75rem;
        border-radius: 10px
    }
}

.fluid-shape {
    max-width: 100%;
    background-image: url('../img/konsultacja-pomoc-w-doborze.jpg');
    background-size: cover;
    background-position: center;
}

.img-choose {
    height: auto;
    position: relative;
}

.img-category-header {
    max-width: 100%;
    background-image: url('../img/katalog-kategoria-branza.jpg');
    background-size: cover;
    background-position: center;
}

.img-contact-header {
    max-width: 100%;
    background-image: url('../img/kontakt-dokumenty.jpg');
    background-size: cover;
    background-position: center;
}


.cut {
    --cut-w: 110px;
    --cut-h: 100px;

    --cut-tl-w: 0px;
    --cut-tl-h: 0px;
    --cut-tr-w: 0px;
    --cut-tr-h: 0px;
    --cut-bl-w: 0px;
    --cut-bl-h: 0px;
    --cut-br-w: 0px;
    --cut-br-h: 0px;

    --shape-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 81.402' preserveAspectRatio='none'%3E%3Cpath fill='black' transform='translate(74 0) scale(-1 1)' d='M74 81.402C73.072 76.907 71.014 72.734 68.013 69.414L11.229 6.602H11.201C8.102 3.218 4.208 0.947 0 0V81.402Z'/%3E%3C/svg%3E");
    --shape-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 81.402' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M74 81.402C73.072 76.907 71.014 72.734 68.013 69.414L11.229 6.602H11.201C8.102 3.218 4.208 0.947 0 0V81.402Z'/%3E%3C/svg%3E");
    --shape-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110.063 100' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 100C6.205 98.787 11.973 95.972 16.543 91.833L101.169 15.163V15.124C105.728 10.94 108.787 5.682 110.063 0H0Z'/%3E%3C/svg%3E");
    --shape-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110.063 100' preserveAspectRatio='none'%3E%3Cpath fill='black' transform='translate(110.063 0) scale(-1 1)' d='M0 100C6.205 98.787 11.973 95.972 16.543 91.833L101.169 15.163V15.124C105.728 10.94 108.787 5.682 110.063 0H0Z'/%3E%3C/svg%3E");

    --left-w: max(var(--cut-tl-w), var(--cut-bl-w));
    --right-w: max(var(--cut-tr-w), var(--cut-br-w));
    --top-h: max(var(--cut-tl-h), var(--cut-tr-h));
    --bottom-h: max(var(--cut-bl-h), var(--cut-br-h));

    border-radius: 16px;

    mask:
        /* Main body — korpus */
            linear-gradient(#000 0 0)
            calc(var(--left-w) - 1px)
            calc(var(--top-h) - 1px) /
        max(0px, calc(100% - var(--left-w) - var(--right-w) + 2px))
            max(0px, calc(100% - var(--top-h) - var(--bottom-h) + 2px))
            no-repeat,

                /* Top strip */
            linear-gradient(#000 0 0)
            calc(var(--cut-tl-w) - 1px) 0 /
        max(0px, calc(100% - var(--cut-tl-w) - var(--cut-tr-w) + 2px))
            var(--top-h)
            no-repeat,

            linear-gradient(#000 0 0)
            calc(var(--cut-bl-w) - 1px) bottom /
max(0px, calc(100% - var(--cut-bl-w) - var(--cut-br-w) + 2px))
            var(--bottom-h)
            no-repeat,

            /* Left strip */
            linear-gradient(#000 0 0)
            0
            calc(var(--cut-tl-h) - 1px) /
        var(--left-w)
            max(0px, calc(100% - var(--cut-tl-h) - var(--cut-bl-h) + 2px))
            no-repeat,

            /* Right strip */
            linear-gradient(#000 0 0)
            right calc(var(--cut-tr-h) - 1px) /
var(--right-w)
            max(0px, calc(100% - var(--cut-tr-h) - var(--cut-br-h) + 2px))
            no-repeat,

            /* Individual corner shapes */
            var(--shape-tl) 0 0 / var(--cut-tl-w) var(--cut-tl-h) no-repeat,

            var(--shape-tr) 100% 0 / var(--cut-tr-w) var(--cut-tr-h) no-repeat,

            var(--shape-bl) 0 100% / var(--cut-bl-w) var(--cut-bl-h) no-repeat,

            var(--shape-br) 100% 100% / var(--cut-br-w) var(--cut-br-h) no-repeat;
}

/* Top-left */
.cut--tl {
    --cut-tl-w: var(--cut-w);
    --cut-tl-h: var(--cut-h);
    border-top-left-radius: 0;
}

/* Top-right */
.cut--tr {
    --cut-tr-w: var(--cut-w);
    --cut-tr-h: var(--cut-h);
    border-top-right-radius: 0;
}

/* Bottom-left */
.cut--bl {
    --cut-bl-w: var(--cut-w);
    --cut-bl-h: var(--cut-h);
    border-bottom-left-radius: 0;
}

/* Bottom-right */
.cut--br {
    --cut-br-w: var(--cut-w);
    --cut-br-h: var(--cut-h);
    border-bottom-right-radius: 0;
}

/* Desktop defaults */
.hero-corner {
    --cut-w: 233px;
    --cut-h: 211px;
}

.choose-corner {
    --cut-w: 79px;
    --cut-h: 72px;
}

/* Mobile */
@media (max-width: 576px) {
    .hero-corner {
        --cut-w: 66px;
        --cut-h: 60px;
    }
}

@media (max-width: 767px) {
    .choose-corner {
        --cut-w: 0;
        --cut-h: 0;
    }
}

.implementation__item {
    position: relative;
}

.implementation__item:not(:last-child)::after {
        content: "";
        display: block;
        position: absolute;
        top: 27px;
        left: 0;
        width: 1px;
        height: calc(100% + var(--space-2xl-plus));
        background: var(--color-border-default);
        z-index: 9999;
}

/* Bottom-right */
/*.cut--br {
    --body-y: 0;
    --strip-x: 0;
    --strip-y: 100%;
    --cut-x: 100%;
    --cut-y: 100%;
    --cut-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110.063 100' preserveAspectRatio='none'%3E%3Cpath fill='black' d='M0 100C6.205 98.787 11.973 95.972 16.543 91.833L101.169 15.163V15.124C105.728 10.94 108.787 5.682 110.063 0H0Z'/%3E%3C/svg%3E");

    border-bottom-right-radius: 0;
}

!* Bottom-left *!
.cut--bl {
    --body-y: 0;
    --strip-x: 100%;
    --strip-y: 100%;
    --cut-x: 0;
    --cut-y: 100%;
    --cut-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 110.063 100' preserveAspectRatio='none'%3E%3Cpath fill='black' transform='translate(110.063 0) scale(-1 1)' d='M0 100C6.205 98.787 11.973 95.972 16.543 91.833L101.169 15.163V15.124C105.728 10.94 108.787 5.682 110.063 0H0Z'/%3E%3C/svg%3E");

    border-bottom-left-radius: 0;
}

!* Top-left *!
.cut--tl {
    --body-y: 100%;
    --strip-x: 100%;
    --strip-y: 0;
    --cut-x: 0;
    --cut-y: 0;
    --cut-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 74 81.402' preserveAspectRatio='none'%3E%3Cpath fill='black' transform='translate(74 0) scale(-1 1)' d='M74 81.402C73.072 76.907 71.014 72.734 68.013 69.414L11.229 6.602H11.201C8.102 3.218 4.208 0.947 0 0V81.402Z'/%3E%3C/svg%3E");

    border-top-left-radius: 0;
}*/




/* ############################################## */
/*                                                */
/*                  OVERRIDES                     */
/*                                                */
/* ############################################## */

.page-content.page-cms {
    padding: var(--layout-section-padding-y-desktop) 0 var(--space-5xl);
}

#header {
    box-shadow: none;
}

#header .logo {
    max-width: 150px;
    width: 130px;
    height: auto
}

#header .header-top {
    padding: 1rem 1rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    color: #7a7a7a;
    -webkit-box-shadow: none;
    box-shadow: none;
    background: transparent;
}

#header .header-top:hover {
    background: var(--color-bg-default);
}

#header a:hover {
    color: var(--color-brand-primary);
    text-decoration: none
}

#header .header-top a[data-depth="0"] {
    color: #282828;
    font-weight: 500;
    font-size: .875rem;
}

#header .header-top .right-nav {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: end;
    -ms-flex-pack: end;
    justify-content: flex-end;
    border-radius: var(--radius-md);
    padding: .75rem 1rem;
    background-color: var(--color-bg-inverse);
}

#header .header-top .right-nav > *:not(:last-child) {
    border-right: 1px solid var(--color-border-on-dark);
    padding-right: .5rem;
    margin-right: .5rem;
}

#header .top-logo {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 130px;
}

#header .top-logo img {
    width: 130px;
    max-height: 100px;
}

#header .top-menu a[data-depth="0"]:hover, a:hover {
    color: #A27D53;
    text-decoration: none;
}

#wrapper {
    background: none;
    padding: 0;
}

.cart-products-count {
    position: absolute;
    top: -4px;
    right: -4px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    box-sizing: border-box;
    min-width: 16px;
    min-height: 16px;
    padding: 0 4px;

    border-radius: 9999px;
    background-color: var(--color-brand-primary);
    color: var(--color-text-primary);

    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
}

/* newsletter */
/* ps_emailsubsciption module */

#blockEmailSubscription_displayFooterBefore {
    margin: unset;
}

.block_newsletter {
    position: relative;
    float: inherit;
    width: 100%;
    max-width: 737px;
    clear: both;
    font-size: .875rem;
    background: var(--color-neutral-80);
    margin: unset;
    border: unset;
}

.block-newsletter__box {
    display: grid;
    border-radius: 50px;
    padding: var(--space-2xl);
}

.block_newsletter #block-newsletter-label {
    font: var(--font-h3);
    color: var(--color-text-inverse);
    margin: 0;
    display: grid;
    gap: var(--space-sm);
}

.block_newsletter #block-newsletter-label > span {
    font: var(--font-h5);
    margin: 0;
    color: var(--color-brand-text-on-dark);
}

#footer .block_newsletter p, #footer .block_newsletter .page-content.page-cms ul, .page-content.page-cms #footer .block_newsletter ul {
    padding-top: var(--space-sm);
}

.block-newsletter__description {
    color: var(--color-text-disabled);
    font: var(--font-body-small);
    letter-spacing: var(--tracking-body-small);
    margin-bottom: var(--layout-margin-desktop);
}

.block-newsletter__text-input {
    color: var(--color-text-disabled);
    font-size: 1.125rem;
    border-bottom: 1px solid var(--color-border-input);
}

.block_newsletter form input[type=email]::placeholder {
    color: var(--color-text-disabled) !important;
}

.block_newsletter form input[type=email] {
    width: 100%;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--color-border-input);
    color: #282828;
    font-size: 1.125rem;
    padding-inline: 0;
}

.block_newsletter form input {
    height: auto;
    -webkit-box-shadow: none;
    box-shadow: none;
}

.policy-label {
    display: flex;
    align-items: flex-start; /* checkbox wyrównany do góry tekstu */
    gap: 8px; /* odstęp między checkboxem a tekstem */
    text-align: left;
    margin-top: var(--space-gap);
    font-size: 11px;
    line-height: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-inverse);
}

#footer {
    background-color: var(--color-bg-dark);
    padding-top: 0;
}

.footer-container li a {
    font: var(--font-body-small);
    color: var(--color-text-disabled);
    cursor: pointer;
}

.footer-container li a:hover {
    color: var(--color-brand-text-on-dark);
}

.footer-container .h3, .footer-container .h4 {
    margin-bottom: 1.25rem;
    font: var(--font-overline);
    color: var(--color-brand-text-on-dark);
}

.footer-container .links ul {
    margin-bottom: 0;
    background-color: transparent;
}

.footer-container .links ul > li {
    padding: 0;
    font-weight: 400;
    border-bottom: none;
}

.footer-container > hr {
    border: 1px solid var(--color-border-on-dark);
}

/* product quantity input */
/* product-add-to-cart partial */

.quantity-input {
    display: inline-flex;
    align-items: center;
    background: #f8f9fa;
    border-radius: 9999px;
    padding: 0 0.75rem;
}

.quantity-input__field {
    width: 2rem;
    text-align: center;
    border: none;
    background: transparent;
    font-weight: 500;
}

.quantity-input__field:focus {
    outline: none;
    box-shadow: none;
}

.quantity-input__btn {
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.quantity-input__btn i {
    font-size: 1rem;
    line-height: 1;
    color: #333;
}

.quantity-input__btn:hover i {
    color: #000;
}

.bootstrap-touchspin {
    position: relative;
    padding-left: 32px;
    padding-right: 32px;
}

.bootstrap-touchspin .btn-touchspin {
    background: transparent;
}

.product-quantity #quantity_wanted {
    background: transparent !important;

}

#quantity_wanted, .bootstrap-touchspin input.js-cart-line-product-quantity, .input-group-btn-vertical .btn {
    border: none;
}

#quantity_wanted, .js-cart-line-product-quantity {
    width: 40px !important;
    height: 50px !important;
    text-align: center;
    margin-left: -1px;
    font-size: 20px;
    font-weight: 700;
}

.input-group-btn-vertical {
    position: absolute !important;
    left: 0;
    display: flex !important;
    gap: 38px;
}

.input-group-btn-vertical .btn {
    height: 50px;
    margin: 0 !important;
}

.input-group-btn-vertical .btn i {
    top: 50%;
    transform: translateY(-50%);
    color: transparent;
}

.bootstrap-touchspin-up::before, .bootstrap-touchspin-down::before {
    color: black;
    font-size: 20px;
    font-weight: 700;

}

.bootstrap-touchspin-up::before {
    content: '+';

}

.bootstrap-touchspin-down::before {
    content: '-';

}

.bootstrap-touchspin-up {
    border-bottom-left-radius: 10px !important;
    border-top-left-radius: 10px !important;

}

.bootstrap-touchspin-down {
    border-top-right-radius: 10px !important;
    border-bottom-right-radius: 10px !important;

}

/* sort */
.brands-sort .select-title, .products-sort-order .select-title, .suppliers-sort .select-title {
    border: 1px solid var(--color-border-default);
    color: var(--color-text-primary);
}

/* breadcrumbs */
.breadcrumb {
    padding: 0;
    margin-bottom: 1.25rem;
    list-style: none;
    background-color: transparent;
    border-radius: 0
}

.breadcrumb ol {
    margin-left: 0px;
    padding-left: 0px;
    margin-bottom: 0;
}

.breadcrumb li {
    display: inline;
}

.breadcrumb li::after {
    margin: .5rem;
    color: var(--color-text-muted);
    content: "/";
}

.breadcrumb li:last-child {
    margin: 0;
    color: var(--color-text-muted);
    content: "/";
}

.breadcrumb li:last-child::after {
    content: "";
}

/* carousel indicators */
.carousel-indicators {
    display: flex;
    gap: 5px;
    transform: translateX(-50%);
    width: fit-content;
    margin: unset;
}

.carousel-indicators li {
    counter-increment: slide;
    display: flex;
    align-items: center;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    text-indent: 0;
    cursor: pointer;
    background: none;
    border: 0;
}

.carousel-indicators li::before {
    display: none;
    content: "0" counter(slide);
    color: #fff;
    font: var(--font-overline);
    letter-spacing: var(--tracking-overline);
}

.carousel-indicators li::after {
    content: "";
    display: block;
    width: 4px;
    height: 4px;
    background: var(--color-border-on-dark);
    border-radius: var(--radius-full);
    transition: width 0.25s ease, background-color 0.25s ease;
}

.carousel-indicators li.active::before {
    color: var(--color-brand-primary);
}

.carousel-indicators li.active::after {
    content: "" !important;
    display: block !important;
    width: 24px !important;
    min-width: 24px;
    height: 4px;
    background-color: var(--color-text-inverse);
    border-radius: var(--radius-full);
}

.carousel-indicators li::marker {
    content: "";
}

.carousel-indicators li,
.carousel-indicators li.active {
    list-style: none !important;
    background: transparent !important;
    border: 0 !important;
}

/* cart */

#blockcart-modal .cart-content label {
    color: var(--color-text-muted);
    font: var(--font-body-small);
}

#blockcart-modal .modal-dialog {
    position: absolute;
    margin: 0;
    right: 0;
    max-width: 480px;
    height: 100%;
}

#blockcart-modal .modal-content {
    height: 100%;
}

#blockcart-modal .modal-body {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
}

#blockcart-modal .cart-content {
    padding-left: 0;
}

#blockcart-modal .cart-content p.product-total {
    padding: 0.5rem;
    background-color: transparent;
    border-top: none;
}

.modal-header::after {
    content: none;
}

.cart-summary-line .label {
    font: var(--font-body-small);
    color: var(--color-text-muted);
}

.cart-summary-line .value {
    color: var(--font-body-small-bold) !important;
}

.block-promo .promo-name .cart-summary-line .label {
    font: var(--font-body-small-bold);
    color: var(--color-brand-text);
}

.block-promo .promo-name .cart-summary-line span {
    color: var(--color-brand-text);
}

.block-promo .promo-input {
    width: 100%;
    height: 44px;
    margin-right: unset;
    color: var(--color-text-muted);
    text-indent: .625rem;
    border: #7a7a7a 1px solid;
}

.block-promo .promo-input input::placeholder {
    color: var(--color-text-muted);
}

.block-promo .promo-input+button {
    margin-top: unset;
    margin-left: unset;
    text-transform: capitalize;
    border: none;
}

.product-line-grid-body>.product-line-info .unit-price-cart {
    font: var(--font-body-small);
}

/* top menu */
#top_sub_menu_15142 {
    top: 65px !important;
}

.custom-popover {
    position: absolute;
    top: 65px;
    /*left: -20px;*/
    z-index: 1060;
    display: block;
    max-width: 921px;
    /*padding: 1px;*/
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-style: normal;
    font-weight: normal;
    letter-spacing: normal;
    line-break: auto;
    line-height: 1.5;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    white-space: normal;
    word-break: normal;
    word-spacing: normal;
    font-size: 0.875rem;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, 0.2);
    border-radius: 0 0 25px 25px;
}

.top-menu .sub-menu {
    z-index: 18;
    width: initial;
    min-width: initial;
    margin-left: 0.9375rem;
    visibility: hidden;
    border: none;
    box-shadow: 2px 1px 11px 2px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: opacity 0.5s ease, visibility 0.5s ease;
}

.top-menu a:not([data-depth="0"]) {
    display: block;
    padding: .625rem;
    font-weight: 400;
    color: #7a7a7a;
}

#mobile_top_menu_wrapper {
    padding: unset;
}

#mobile_top_menu_wrapper .top-menu a[data-depth="0"] {
    padding: 0.625rem;
    border-bottom: 1px solid #CCCDD0;
}

#mobileMenuList{
    margin-top: 20px;
}

#mobileMenuList a{
    width: 100%;
    float: left;
    text-transform: uppercase;
    border-bottom: 1px solid #CCCDD0;
    padding-bottom: 15px;
    margin-bottom: 15px;
}

#mobileMenuList a:last-child{
    border-bottom: 0px;
}

#mobileMenuList a.cat{
    padding-left: 15px;
    text-transform: none;
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 0px;
    font-size: 14px;
}

#products .products .product .product-miniature {
    display: block !important;
}


#products .products {
}

#products .products > div {
    flex: 1 1 100%;
    min-width: 0;
}

@media (min-width: 768px) {
    #products .products > div {
        flex-basis: calc(50% - var(--space-gap) / 2);
    }
}

@media (min-width: 992px) {
    #products .products > div {
        flex-basis: calc(33.333% - var(--space-gap) * 2 / 3);
    }
}

.productdescp p {
    color: #232323;
    font-size: 16px;
}

#product #content {
    max-width: unset;
}

.product-cover img {
    background: transparent;
}

#topMenu {
    display: block;
    margin-top: 15px;
}

.carousel-inner{
    min-height: 800px;
}

.carousel .carousel-item .caption {
    position: absolute;
    max-width: unset;
}

@media (max-width: 991px) {
    .carousel .carousel-item .caption {
        position: absolute;
        margin: unset;
        text-align: left;
    }
}

@media (max-width: 1199px) {
    .carousel .carousel-inner {
        height: 650px;
    }
}

@media (max-width: 767px) {
    #topMenu {
        display: none;
    }

    .carousel-item.active .col-md-8.no-margin{
        display: none;
    }

    .carousel-inner{
        min-height: 200px;
    }

    #category #left-column #search_filters .facet {
        padding-top: 1.5rem;
        border-bottom: 1px solid var(--color-border-default);
    }

    .w-100-sm-down {
        width: 100%;
    }

    .order-2-sm-down {
        order: 2;
    }
}

#menu-icon {
    display: none;
}

@media (max-width: 767px) {
    #menu-icon {
        display: block;
    }
}

#topMenu ul li a {
    text-transform: uppercase;
    display: flex;
    justify-content: left;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}

#header .header-top:hover #topMenu ul li a {
    color: var(--color-text-primary) !important;
}

#header .header-top:hover .header-hover-hidden, .header-hover-shown {
    display: none;
}

#header .header-top:hover .header-hover-shown {
    display: block;
}

#topMenu ul li a:hover {
    color: var(--color-brand-text) !important;
}

#topMenu ul li a svg {
    margin-left: 5px;
}

#topMenu ul {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
}

#topMenu #submenu{
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    padding-top: 32px;
}

#topMenu .opensubmenu:hover > #submenu{
    display: block;
}

#topMenu .subcontent{
    background: #FDFDFD;
    box-shadow: 5px 40px 40px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-top: 1px solid var(--color-border-strong);
}

#topMenu .subcontent .title{
    color: var(--color-text-muted);
    font: var(--font-overline);
    margin-bottom: 10px;
    text-transform: uppercase;
}

#topMenu .subcontent .categoryList{
    display: flex;
    flex-direction: column;
    gap: var(--space-ms);
    padding-top: 15px;
}

#topMenu .subcontent .categoryList a{
    text-transform: none;
    font-size: 15px;
}

#topMenu .subcontent .all{
    font-size: 12px;
    text-decoration: underline;
    text-transform: none;
}

#topMenu .subcontent .cat_main{
    display: flex; flex-direction: column; justify-content: space-between; padding: 24px;
    padding-bottom: 24px;
    min-width: 200px;
}

#topMenu .subcontent .promo{
    margin-top: 24px;
    min-width: 240px;
    padding-inline: 24px;
    margin-bottom: 24px;
    display: flex; flex-direction: column; justify-content: space-between;
}

#topMenu .subcontent .promo .title{
    color: #232323;
    font-size: 20px;
    font-weight: 200;
    text-transform: none;
}

#topMenu .subcontent .promo .bottom div{
    color: #232323;
    font-weight: 200;
}

#topMenu .subcontent .promo .prod{
    max-width: 180px;
    overflow: hidden;
    margin-top: 15px;
    margin-bottom: 15px;
}

#topMenu .subcontent .promo .prod .prod_top{
    display: flex;
    justify-content: end;
    align-items: flex-end;
}

#topMenu .subcontent .promo .prod .prod_content svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

#topMenu .discount{
    background: #000;
    right: 0;
    color: #FFF;
    text-transform: uppercase;
    font-size: 14px;
    border-radius: 2000px;
    padding: 5px;
}

#topMenu .cat{
    background: #F3F3F3;
    right: 0;
    color: #232323;
    text-transform: uppercase;
    font-size: 12px;
    border-radius: 2000px;
    padding: 5px;
    padding-left:15px;
    padding-right:15px;
}

#topMenu .subcontent .zestaw{
    max-width: 300px;
    padding-left: 24px;
    padding-top: 24px;
    padding-right: 24px;
    padding-bottom: 24px;
    overflow: hidden;
    border-radius: 0px 0px 20px 0px;
    display: flex; flex-direction: column; justify-content: space-between;
}

#topMenu .subcontent .zestaw .title{
    color: #232323;
    font-size: 20px;
    font-weight: 200;
    text-transform: none;
}

#topMenu .subcontent .zestaw .bottom div{
    color: #232323;
    font-weight: 200;
}

#topMenu .subcontent .zestaw .prod{
    max-width: 250px;
    overflow: hidden;
    margin-top: 15px;
    margin-bottom: 15px;
}

#topMenu .subcontent .zestaw .prod .prod_top{
    display: flex;
    justify-content: space-between;
    align-items: center;
}


@media (min-width: 1024px){
    section#ambasador .container > div > div{
        flex:1 1 calc(50% - 15px) !important;
        max-width:calc(50% - 15px) !important;
    }
}

/* override classes to allow collapsable facets on desktop */
/* ps_facetedsearch module */

#category #left-column #search_filters .facet .title .collapse-icons .facet-collapse-remove,
#category #left-column #search_filters .facet .title[aria-expanded=true] .collapse-icons .facet-collapse-add {
    display: none
}

#category #left-column #search_filters .facet .collapse.in,
#category #left-column #search_filters .facet .title[aria-expanded=true] .collapse-icons .facet-collapse-remove {
    display: block
}

.title .collapse-icons .custom-collapse-remove,
.title[aria-expanded=true] .collapse-icons .custom-collapse-add {
    display: none
}

#search_filters .navbar-toggler {
    display: none;
}

.title[aria-expanded=true] .collapse-icons .custom-collapse-remove {
    display: block
}

/*#category #left-column #search_filters .facet .collapse {*/
/*    display: none*/
/*}*/

#category #left-column #search_filters .facet .navbar-toggler {
    display: inline-block;
    height: inherit;
    padding: 0
}

.block-category h1 {
    margin-bottom: .75rem;
    font-size: inherit;
}

#search_filters .facet, #search_filters_brands .facet, #search_filters_suppliers .facet {
    padding-block: 1.5rem;
}

/* active filters */
/* ps_facetedsearch module */

.active_filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    padding: 0;
    margin-bottom: 1.25rem;
    background: transparent;
}

.active_filters ul {
    margin: 0;
}

.active_filters .filter-block {
    display: inline-block;
    padding: var(--space-sm) var(--space-ms);
    font-size: .875rem;
    color: var(--color-text-primary);
    background: var(--color-bg-subtle);
    margin: 0;
}

.active_filters .filter-block .close {
    margin-top: .1875rem;
    margin-left: .3125rem;
    font-size: .9375rem;
    color: #FFFFFF4D;
}

.custom-marker li::marker {
    color: var(--color-brand-primary) !important;
}

/* inputs */

.input-radio {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    opacity: 0;
    border: 1px solid #282828
}

.input-color:checked + span,
.input-color:hover + span,
.input-radio:checked + span,
.input-radio:hover + span {
    background-color: #282828;
    color: #fff;
}

.radio-label {
    display: inline-block;
    padding: .125rem .625rem;
    font-weight: 600;
    background: #fff;
    border: 1px solid #282828;
    border-radius: 99999px;
}

.form-control {
    border-radius: 8px;
    border: 1px solid var(--color-border-input);
    padding: 1.25rem;
    color: var(--color-text-primary);
    background-color: var(--color-bg-default);
    height: 56px;
}

.form-control::placeholder {
    color: var(--color-text-muted);
}

.form-control:focus {
    color: #282828;
    background-color: #fff;
    border-color: var(--color-bg-inverse);
    outline: .125rem solid var(--color-bg-inverse);
}

.custom-select-control {
    appearance: none;
    -webkit-appearance: none;
    padding: var(--space-md) var(--space-ms);
    border-radius: var(--space-sm);
    border: 1px solid var(--color-border-input);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='m1 1 5 5 5-5' fill='none' stroke='%23353B3B' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-md) center;
    background-size: 12px 8px;
    height: 56px !important;
}

.custom-checkbox input[type=checkbox] {
    position: relative;
    width: 20px;
    height: 20px;
    appearance: none;
    z-index: 2;
}

.custom-checkbox {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    width: 24px !important;
    height: 24px !important;
    cursor: pointer;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
}

.custom-checkbox:has(input[type="checkbox"]:checked) {
    border: 1px solid var(--color-bg-inverse);
    background-color: var(--color-bg-inverse);
}

.custom-checkbox input[type=checkbox] + .checkbox-checkmark + svg {
    position: absolute;
    top: 0;
    left: 0;
}

.custom-checkbox input[type=checkbox] + .checkbox-checkmark {
    display: none;
    margin: auto !important;
    font-size: 1.25rem;
}

.custom-checkbox input[type=checkbox]:checked + .checkbox-checkmark {
    display: block;
    position: absolute;
    top: 5px !important;
    left: 5px !important;
    z-index: 3;
    border: none;
}

/*.category-checkbox {
    display: flex;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-bg-inverse);
}*/

.custom-radio {
    position: relative;
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: .5rem;
    vertical-align: middle;
    cursor: pointer;
    background: #F2F3F7;
    border: #95969B 1px solid;
    border-radius: var(--radius-sm);
}

.custom-radio input[type=radio]:checked + span {
    position: absolute;
    top: .25rem;
    left: .25rem;
    display: block;
    width: 10px;
    height: 10px;
    background-color: #282828;
    border-radius: 50%;
}

.custom-file-upload {
    box-sizing: border-box;
    height: 56px;
    padding: 0 16px;
    border: 1px dashed #b7c4c4;
    border-radius: var(--radius-md);
    background-color: #fff;
    color: var(--color-text-muted);
    font: var(--font-body-small);
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.custom-file-upload:hover {
    border-color: #879b9b;
}

.custom-file-upload:focus-within {
    outline: 2px solid #7c9999;
    outline-offset: 3px;
}

.custom-file-upload input[type="file"] {
    display: none;
}

.input-group .input-group-btn > .btn[data-action="show-password"] {
    position: absolute;
    right: 10%;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.input-group .form-control:not(:last-child) {
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
}

.input-group.focus {
    color: #282828;
    background-color: #fff;
    border-color: #A27D53;
    outline: .125rem solid #A27D53;
    border-radius: 8px;
}

.forgotten-password .form-fields label.required {
    width: max-content;
}

.forgotten-password .form-fields .center-email-fields {
    display: flex;
    flex-direction: column;;
    gap: 1rem;
    max-width: 350px;
}

.forgotten-password .form-fields .email {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
}

/* contact page */
.contact-form {
    background-color: var(--color-bg-subtle) !important;
    padding: var(--space-2xl);
    border-radius: var(--radius-xl);
}

.contact-rich {
    background: linear-gradient(135deg, var(--color-bg-inverse, #1A1B1B) 0%, var(--color-bg-dark-subtle, #4C5959) 41%);
    padding: var(--space-xl);
}

form .form-control-label {
    font: var(--font-label);
    color: var(--color-text-label);
}
